--- title: "Tworzenie stron www dla firm: projekt, wdrożenie i opieka" description: "Strony firmowe, sklepy, strony z konfiguratorem i landing page dla średnich i dużych firm: panel pod Waszą markę, przeniesienie treści i opieka po starcie." url: https://fluostudio.pl/uslugi/strony-www/ --- # Strony www, które Wasz zespół edytuje sam. Projektujemy i programujemy strony średnich i dużych firm: ładne, szybkie i wygodne w prowadzeniu. Panel składamy z bloków skrojonych pod Waszą markę, więc kolejne podstrony powstają bez programisty. [Porozmawiajmy o Waszej stronie](https://fluostudio.pl/kontakt/) Zobacz realizacje 01 Podejście ## Co robimy, aby stworzyć świetną stronę? Tak pracujemy przy każdej stronie, od wizytówki po serwisy grupy w kilku krajach. Stawiamy małe, ale pewne kroki i nie idziemy na skróty. 1. ### Analiza i realne cele Pracę nad każdą stroną zaczynamy od analizy rynku i konkurencji oraz warsztatów z Wami. Ustalamy cele strony, wizerunek, jaki ma budować, i to, czym Wasza oferta ma się wyróżnić. Do projektowania przechodzimy dopiero wtedy, gdy dobrze rozumiemy Wasze potrzeby i ryzyka. 2. ### Najpierw makieta Porządkujemy [architekturę informacji](https://fluostudio.pl/baza-wiedzy/slownik/architektura-informacji/): treści i ścieżki odwiedzających układamy najpierw na [makiecie](https://fluostudio.pl/baza-wiedzy/slownik/makieta/), jeszcze bez kolorów i zdjęć. Gdy szkic jest zrozumiały, projekt graficzny ma na czym stanąć. 3. ### Przejrzyście na każdym etapie Zanim zaczniemy, wiecie, jak będzie zorganizowana praca i jakiego rezultatu się spodziewać. Pracujemy etapami, zgodnie z harmonogramem, i na bieżąco mówimy, co robimy, dlaczego i kiedy. 4. ### Wszystko zmienicie sami Teksty, zdjęcia, sekcje i całe podstrony zmieniacie w panelu. Każdy blok ma proste pola, więc poradzi sobie z nimi nawet osoba, która dołączyła do zespołu wczoraj. 5. ### Przeprowadzka od A do Z Przeprowadzkę bierzemy na siebie: przenosimy treści ze starej strony, ustawiamy przekierowania ze starych adresów, domenę i serwer, a po starcie zaglądamy w raporty z Google. Na nową stronę Grupy BEST przenieśliśmy w ten sposób ponad 4 000 wpisów, raportów i dokumentów. 6. ### Dbamy o detal Ikony, projekt, animacje i kod robimy sami, dla każdej strony od nowa. Strona wygląda jak Wasza marka i ładuje tylko kod, którego używa. 7. ### Bez „tego się nie da” Animacje, konfigurator produktu, połączenie z magazynem, portal z logowaniem: takie rzeczy budujemy na co dzień. Gdy jakiś pomysł kosztowałby więcej, niż przyniesie, mówimy o tym na starcie i proponujemy prostszą drogę do tego samego celu. 8. ### Szybkość Zdjęcia, filmy i animacje odchudzamy do lekkich formatów, a skrypty wczytują się dopiero wtedy, gdy są potrzebne. Szybkość mierzymy przed startem i po nim, także na telefonie i przy słabym zasięgu. 9. ### Prawdziwie responsywna Wersję na telefon i tablet projektujemy z tą samą starannością co wersję na komputer. Każdy blok dostaje własny układ na mały ekran, ułożony pod kciuk. 10. ### Dostępność w standardzie Każdą stronę projektujemy i programujemy według WCAG: kontrast, kolejność nagłówków, obsługa klawiaturą i czytnikiem ekranu. O [dostępności](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/) myślimy w każdym bloku od pierwszego szkicu. 11. ### Na lata, z roczną gwarancją Zabezpieczamy stronę i piszemy kod tak, żeby kolejne aktualizacje przechodziły bez emocji. Przez 12 miesięcy po wdrożeniu robimy aktualizacje i kopie zapasowe trzymane poza serwerem. 12. ### Bez ukrytych kosztów Wycena nie rośnie w trakcie pracy. Jeśli coś, na co się umówiliśmy, zajmie nam więcej czasu, niż zakładaliśmy, ten czas idzie na nasz rachunek. Naszym celem są strony, o których możecie trochę zapomnieć: **same się aktualizują, pilnują i sprawdzają.** 02 Typy stron ## Jakiej strony potrzebujecie? Te strony robimy najczęściej, choć lista jest otwarta. Przy każdej piszemy, co robimy i co dostajecie, i pokazujemy podobną realizację. Gdy strona powstaje razem z nową marką albo po rebrandingu, zaczynamy od [brandingu](https://fluostudio.pl/uslugi/branding/), żeby marka i strona mówiły jednym głosem. Strona firmowa Dla klientów, partnerów, kandydatów i inwestorów Co robimy Każdy, kto Was sprawdza, szuka czegoś innego: klient oferty, partner danych technicznych, kandydat ofert pracy, a inwestor raportów. Projektujemy osobną drogę dla każdego z nich i panel, w którym Wasz zespół sam składa kolejne podstrony. Co dostajecie - Projekt i wdrożenie strony - Wzory podstron dla usług, produktów, wpisów i ofert pracy - Formularze połączone z Waszymi systemami - Szkolenie zespołu i roczna opieka Urtica Strona dla czterech grup odbiorców, w dwóch językach [Więcej o stronach firmowych](https://fluostudio.pl/uslugi/strony-www/strona-firmowa/) Podobne realizacje - [Grupa BEST](https://fluostudio.pl/projekty/best-s-a/) - [PolTREG](https://fluostudio.pl/projekty/poltreg/) - [Intima Clinic](https://fluostudio.pl/projekty/intima-clinic/) - [Mily Group](https://fluostudio.pl/projekty/mily-group/) - [Fundacja MultiSport](https://fluostudio.pl/projekty/fundacja-multisport/) Strona wizytówka Kilka podstron, które urosną razem z firmą Co robimy Wizytówka mieści firmę, ofertę i kontakt na kilku podstronach. Składamy ją z tych samych bloków co duże strony firmowe, więc gdy firma urośnie, kolejne podstrony dodacie sami, bez przebudowy. Tak wizytówka dorasta do pełnej strony firmowej. Co dostajecie - Projekt i wdrożenie kilku podstron - Bloki, z których złożycie kolejne - Formularz kontaktowy - Szkolenie i instrukcja Landing page Jedna strona pod kampanię, premierę albo akcję Co robimy Projektujemy stronę, która mówi to samo co reklama i prowadzi do jednego działania: zakupu, zapisu albo zapytania. Wersje dla krajów i sklepów składamy z tego samego układu. Co dostajecie - Projekt i wdrożenie landing page - Wersje dla krajów i sieci handlowych - Animacje rozpisane dla programisty - Formularz połączony z Waszymi systemami Acer [Landing page laptopa Aspire Vero, który wracał do nas z kolejnych krajów](https://fluostudio.pl/projekty/acer/) [Więcej o landing page](https://fluostudio.pl/uslugi/strony-www/landing-page/) Podobne realizacje - [Vee Care](https://fluostudio.pl/projekty/vee/) - [Moc Pomidora](https://fluostudio.pl/projekty/dawtona/) Sklep internetowy Połączony z magazynem, wygodny na telefonie Co robimy Projektujemy sklep, który wie, co leży w magazynie, i daje się obsłużyć kciukiem na telefonie. Wdrażamy go na WooCommerce albo projektujemy pod platformę, której już używacie. Co dostajecie - Karta produktu, która odpowiada na pytania - Filtry i porównywarka - Strona główna na co dzień i na promocje - Połączenie z magazynem i systemami sprzedaży Design Optyk [Sklep sieci salonów optycznych, połączony z magazynami salonów](https://fluostudio.pl/projekty/designoptyk/) [Więcej o sklepach internetowych](https://fluostudio.pl/uslugi/strony-www/sklep-internetowy/) Podobne realizacje - [Overmax](https://fluostudio.pl/projekty/overmax/) - [Itodi](https://fluostudio.pl/projekty/itodi/) - [Zippy Tail](https://fluostudio.pl/projekty/zippy-tail/) - [Novicare](https://fluostudio.pl/projekty/novicare/) Strona z konfiguratorem Klient sam składa produkt i wysyła zapytanie Co robimy Klient wybiera wymiar, kolor i dodatki, widzi swoją wersję i wysyła zapytanie z pełną konfiguracją. Handlowiec ma komplet informacji w pierwszej wiadomości, a setki wariantów pokazuje jeden konfigurator. Co dostajecie - Konfigurator na danych Waszych produktów - Zapytanie z pełną konfiguracją do handlowca - Modele i pliki do pobrania przy produkcie - Panel do dodawania nowych produktów Biurokoncept [Katalog ponad tysiąca mebli, w którym klient sam składa biurko](https://fluostudio.pl/projekty/biurokoncept/) [Więcej o stronach z konfiguratorem](https://fluostudio.pl/uslugi/strony-www/strona-z-konfiguratorem/) Podobne realizacje - [PetCuisine](https://fluostudio.pl/projekty/petcuisine/) - [Itodi](https://fluostudio.pl/projekty/itodi/) - [Hana Design](https://fluostudio.pl/projekty/hana-design/) Strona dla firmy medycznej Usługi, lekarze, cenniki i rezerwacja wizyty Co robimy Układamy stronę tak, żeby pacjent sam znalazł usługę, lekarza i cenę, a potem od razu umówił wizytę. Opisy usług powstają według kilku wzorów, a ceny przy usługach biorą się z jednego cennika, więc zespół kliniki dodaje kolejne usługi sam. Co dostajecie - Wzory stron usług i lekarzy - Jeden cennik dla całej strony - Rezerwacja wizyty z każdej podstrony Intima Clinic [243 strony usług według trzech wzorów i wspólny cennik](https://fluostudio.pl/projekty/intima-clinic/) [Więcej o projektach dla branży medycznej](https://fluostudio.pl/branza-medyczno-farmaceutyczna/) Podobne realizacje - [Nowa Stomatologia](https://fluostudio.pl/projekty/nowa-stomatologia/) - [PolTREG](https://fluostudio.pl/projekty/poltreg/) Strona w kilku językach i krajach Osobne wersje dla rynków, każda z własnymi treściami Co robimy Wersję językową dodajemy dla rynku, z którego przychodzą klienci i zapytania. Każda ma własne treści, a adresy ustawiamy tak, żeby wyszukiwarka pokazywała odwiedzającym właściwy język. Co dostajecie - Osobna wersja dla każdego rynku - Wspólne bloki dla wszystkich wersji - Edycja każdej wersji niezależnie od pozostałych - Adresy, dzięki którym wyszukiwarka pokazuje właściwy język Grupa BEST [Strona best.com.pl i serwisy spółek grupy w pięciu krajach, na jednym systemie](https://fluostudio.pl/projekty/best-s-a/) [Czym jest strona wielojęzyczna](https://fluostudio.pl/baza-wiedzy/slownik/strona-wielojezyczna/) Podobne realizacje - [Porta PRO](https://fluostudio.pl/projekty/porta-pro/) - [PolTREG](https://fluostudio.pl/projekty/poltreg/) Portal dla partnerów Dla architektów, dystrybutorów i partnerów handlowych Co robimy Portal to osobny serwis dla tych, którzy pracują z Waszymi produktami, z bazą wiedzy, plikami do pobrania i filtrami po parametrach. Gdy zespół doda materiał, realizację albo wydarzenie, portal sam ułoży je na liście i w kalendarzu. Co dostajecie - Baza wiedzy z filtrami - Pliki do pobrania: katalogi, rysunki i modele BIM - Kalendarz wydarzeń i webinarów - Panel, w którym zespół dodaje materiały Porta PRO [Strefa Architekta z parametrami drzwi, plikami BIM i bazą wiedzy](https://fluostudio.pl/projekty/porta-pro/) Podobne realizacje - [Acer · Partner Marketing Hub](https://fluostudio.pl/projekty/acer/) Strona zgodna z WCAG Dostępna także z czytnikiem ekranu i samą klawiaturą Co robimy Projektujemy i poprawiamy strony tak, żeby spełniały WCAG na poziomie AA. Sprawdzamy kontrast, nagłówki, formularze, opisy zdjęć oraz obsługę klawiaturą i czytnikiem ekranu, a poprawki robimy w projekcie i w kodzie. Co dostajecie - Audyt zgodności z WCAG na poziomie AA - Lista poprawek dla projektantów i programistów - Poprawki w projekcie i w kodzie - Sprawdzenie strony przed publikacją Grupa BEST [best.com.pl po polsku i angielsku, wdrożony zgodnie z WCAG 2.0](https://fluostudio.pl/projekty/best-s-a/) [Więcej o stronach zgodnych z WCAG](https://fluostudio.pl/uslugi/strony-www/strona-zgodna-z-wcag/) Sytuacje, od których zaczynamy ## Z czym przychodzą do nas firmy [Wszystkie sytuacje](https://fluostudio.pl/wyzwania/) - „Nowa strona to dla nas przeprowadzka, a nikt w firmie nie ma czasu jej pilnować.” Prowadzimy ją od A do Z: spis starych treści i adresów, przeniesienie, przekierowania, domena i serwer. Po starcie sprawdzamy raporty z Google. - [„Strona, domena i serwer są u różnych dostawców, a gdy coś padnie, każdy odsyła nas do kogoś innego.” Możemy kupić serwer w Waszym imieniu i nim zarządzać: aktualizacje, kopie zapasowe poza serwerem i monitoring. Za dostawców odpowiadamy wtedy my. Porządek w infrastrukturze www](https://fluostudio.pl/wyzwania/infrastruktura-webowa/) - [„Nie wiemy, czy potrzebujemy nowej strony, czy wystarczy poprawić tę, którą mamy.” Zaczynamy od diagnozy: treści, ścieżki odwiedzających, panel, hosting i dostępy. Jeśli fundament jest dobry, proponujemy zmiany etapami zamiast budowy od nowa. Kiedy przebudowa strony ma sens](https://fluostudio.pl/wyzwania/nowa-strona/) 03 Punkt wyjścia ## Co dziś nie działa na Waszej stronie? Te zdania słyszymy najczęściej. Pod każdym jest to, co z tym robimy, i realizacja z podobnym punktem wyjścia. „Nawet literówkę na stronie poprawia nam programista.” Panel z bloków, w którym zmiany robi Wasz zespół Stronę budujemy z bloków zaprojektowanych pod Waszą markę. Redaktor wybiera blok, wpisuje treść i podmienia zdjęcie, a układ, kolory i krój pisma pilnują się same. Programista jest potrzebny dopiero wtedy, gdy strona ma się nauczyć czegoś nowego. Co robimy - Bloki z polami, w których zmienia się treść, a układ zostaje na miejscu. - Wzory podstron, z których powstają kolejne strony. - Szkolenie i instrukcja dla osób, które będą stronę prowadzić. „Część strony zmieniamy sami. Reszty boimy się dotknąć, żeby czegoś nie zepsuć.” Cała strona w panelu, z granicami w każdym bloku W panelu jest cała strona, od pierwszego ekranu po stopkę. Każdy blok ma swoje pola i granice, więc przypadkowe kliknięcie nie rozsypie układu ani nie przemaluje przycisku. Zespół zmienia stronę śmiało. Co robimy - Przegląd tego, co dziś da się zmienić, a czego nie. - Bloki dla każdego rodzaju treści, każdy z wersją na telefon. - Podgląd zmian przed publikacją. Zobacz naszą podobną realizację [](https://fluostudio.pl/projekty/porta-pro/) Porta PRO Strefa Architekta Porta stoi na własnym motywie z ponad pięćdziesięciu bloków. Każdy ma swoje pola, wersję na telefon i wersję językową, a zespół Porta układa z nich nowe strony bez programisty. [Zobacz projekt Porta PRO](https://fluostudio.pl/projekty/porta-pro/) Podobne realizacje - [Grupa BEST](https://fluostudio.pl/projekty/best-s-a/) - [Intima Clinic](https://fluostudio.pl/projekty/intima-clinic/) „Kampania rusza za dwa tygodnie, a strony pod nią jeszcze nie ma.” Landing page z gotowych bloków Landing page ma jedno zadanie i nic nie odciąga od niego uwagi. Gdy strona stoi na blokach, kolejne wersje pod kampanie i kraje składa się z gotowych klocków, a czas idzie na hasło i grafikę. Co robimy - Jedna strona, jeden cel i jeden przycisk. - Wersje pod kraje, sklepy i kampanie z tych samych bloków. - Formularz połączony z Waszą skrzynką albo systemem sprzedaży. Zobacz naszą podobną realizację [](https://fluostudio.pl/projekty/acer/) Acer Dla Acer UK zaprojektowaliśmy landing page laptopa Aspire Vero z animacjami, które pokazują ekologię obrazem, od kartonowego opakowania po sadzonkę wyrastającą z ekranu. Potem Vero wracało do nas z kolejnych krajów. [Zobacz projekt Acer](https://fluostudio.pl/projekty/acer/) Podobne realizacje - [Vee](https://fluostudio.pl/projekty/vee/) - [Biurokoncept](https://fluostudio.pl/projekty/biurokoncept/) „Freelancer, który robił nam stronę, przestał odbierać telefon.” Opieka z jasnym zakresem, a dostępy u Was Stronę bierzemy pod opiekę z jasno opisanym zakresem: aktualizacje, kopie zapasowe trzymane poza serwerem i monitoring. Dostępy, hasła i pliki trzymacie u siebie, w komplecie. Gdy strona utknęła w połowie drogi, najpierw sprawdzamy, co da się z niej uratować. Co robimy - Przegląd tego, co jest: kod, wtyczki, hosting i dostępy. - Porządek w dostępach, tak żeby nic nie zależało od jednej osoby. - Stała opieka i zmiany wtedy, gdy są potrzebne. Zobacz naszą podobną realizację [![Strona główna 32nowastomatologia.pl z hasłem „Eksperci od uśmiechu”.](https://fluostudio.pl/media/uslugi/strony-www/sytuacje/nowa-stomatologia-1600.webp)](https://fluostudio.pl/projekty/nowa-stomatologia/) Nowa Stomatologia Klinika przyszła do nas ze starą stroną i niedokończoną nową, którą zaczął inny wykonawca. Zrobiliśmy stronę od nowa i rozwijaliśmy ją dalej: doszła wersja angielska, nowy układ i rezerwacja wizyt w dwóch kliknięciach. [Zobacz projekt Nowa Stomatologia](https://fluostudio.pl/projekty/nowa-stomatologia/) Podobne realizacje - [Itrons](https://fluostudio.pl/projekty/itrons/) - [Fundacja MultiSport](https://fluostudio.pl/projekty/fundacja-multisport/) - [PetCuisine](https://fluostudio.pl/projekty/petcuisine/) „Strona wygląda, jakby zatrzymała się kilka lat temu.” Mniej rzeczy na ekranie i jedna jasna droga Zaczynamy od tego, czego szukają odwiedzający i jak wypadacie na tle konkurencji. Na pierwszym ekranie zostaje mocne hasło, produkt i jedna jasna droga dalej, a resztę porządkujemy w strukturze, żeby nic ważnego nie zginęło. Co robimy - Mapa strony ułożona według tego, czego szukają ludzie. - Nowy układ w Waszych kolorach i krojach pisma. - Przeniesienie treści i przekierowania ze starych adresów. Zobacz naszą podobną realizację [](https://fluostudio.pl/projekty/dawtona/) Grupa Dawtona Dawtona zmieniła wygląd etykiet, a strona została przy starym wizerunku. Nowa dawtona.pl ma sporo ruchu, ale największą robotę robi porządek: w 112 produktach trudno się zgubić. [Zobacz projekt Grupa Dawtona](https://fluostudio.pl/projekty/dawtona/) Podobne realizacje - [PolTREG](https://fluostudio.pl/projekty/poltreg/) - [Pokket](https://fluostudio.pl/projekty/pokket/) „Mamy kilka stron i każda wygląda inaczej.” Jeden system dla wszystkich stron firmy Budujemy jeden system: wspólne bloki, nawigację i style tekstu. Każda spółka albo marka zachowuje swoje akcenty i funkcje, a kolejna strona startuje z gotowym szkieletem. Droga do startu jest krótsza, a kodu do utrzymania mniej. Co robimy - Przegląd wszystkich stron i tego, co mają wspólnego. - Wspólne bloki i zasady, a w nich miejsce na różnice. - Kolejne strony na tym samym systemie, każda z własnym panelem. Zobacz naszą podobną realizację [](https://fluostudio.pl/projekty/best-s-a/) Grupa BEST Sześć serwisów spółek Grupy BEST w pięciu krajach stoi na jednym systemie. Mają ten sam szkielet i nawigację łączącą grupę, a różnią się akcentem, zdjęciami i funkcjami. Każdy ma własny panel. [Zobacz projekt Grupa BEST](https://fluostudio.pl/projekty/best-s-a/) Podobne realizacje - [Grupa Dawtona](https://fluostudio.pl/projekty/dawtona/) - [Porta Drzwi](https://fluostudio.pl/projekty/porta-drzwi/) „Te same produkty wpisujemy ręcznie w kilku miejscach.” Dane w jednym miejscu, a strona bierze je sama Produkt, cenę albo stan magazynu wpisuje się raz, w jednym miejscu, a strona pobiera je z systemów, których już używacie. Mniej przepisywania to mniej pomyłek i mniej pracy przy każdej zmianie oferty. Co robimy - Mapa tego, gdzie dziś żyją dane o produktach. - Połączenie strony z programem magazynowym, sprzedażowym albo rekrutacyjnym. - Jeden cennik albo katalog, który zasila całą stronę. Zobacz naszą podobną realizację [](https://fluostudio.pl/projekty/designoptyk/) Design Optyk Napisaliśmy aplikację, która czyta stany z programu magazynowego w salonach Design Optyk i przekazuje je do sklepu. Podłączyliśmy sześć z siedmiu salonów, a zamówienia, ceny i nowe produkty idą też przez BaseLinker. [Zobacz projekt Design Optyk](https://fluostudio.pl/projekty/designoptyk/) Podobne realizacje - [Intima Clinic](https://fluostudio.pl/projekty/intima-clinic/) „Klienci nie potrafią sobie wyobrazić naszego produktu w swojej wersji.” Konfigurator, który pokazuje ich wersję Konfigurator pokazuje produkt w wersji klienta: z jego wymiarem, kolorem i dodatkami. Przy produktach na zamówienie zapytanie z gotową konfiguracją, które trafia do handlowca, często działa lepiej niż koszyk. Co robimy - Wybór cech, o które klienci pytają najczęściej. - Konfigurator na karcie produktu, także na telefonie. - Zapytanie z pełną konfiguracją, które trafia do handlowca. Zobacz naszą podobną realizację [![Karta biurka z konfiguratorem: wymiar, wykończenie blatu i przycisk wysyłania zapytania.](https://fluostudio.pl/media/uslugi/strony-www/sytuacje/biurokoncept-1600.webp)](https://fluostudio.pl/projekty/biurokoncept/) Biurokoncept Na biurokoncept.pl klient wybiera przestrzeń, produkt i jego wersję, a do Biurokoncept trafia zapytanie z pełną konfiguracją: wymiarem, kolorem blatu, stelażem i dodatkami. [Zobacz projekt Biurokoncept](https://fluostudio.pl/projekty/biurokoncept/) Podobne realizacje - [Itodi](https://fluostudio.pl/projekty/itodi/) - [PetCuisine](https://fluostudio.pl/projekty/petcuisine/) - [Hana Design](https://fluostudio.pl/projekty/hana-design/) 04 Skala ## Duże serwisy, które da się prowadzić Strony średnich i dużych firm mają setki podstron, kilka języków i kilka zespołów, które je zmieniają. Dlatego zaczynamy od systemu: wspólnych bloków, wzorów stron i zasad, których pilnuje panel. Już przy projekcie sprawdzamy, czy bloków wystarczy, żeby złożyć z nich każdą potrzebną podstronę. - 93 bloki, z których zespół Urtiki sam składa kolejne podstrony - [243 strony usług Intima Clinic, każda według jednego z trzech wzorów Intima Clinic](https://fluostudio.pl/projekty/intima-clinic/) - 367 przekierowań ze starej strony Urtiki, żeby nie zgubić linków i miejsc w Google - [5 krajów i sześć serwisów Grupy BEST na jednym systemie, każdy z własnym panelem Grupa BEST](https://fluostudio.pl/projekty/best-s-a/) 05 Co dostajecie ## Stronę, którą prowadzicie sami Zostaje u Was strona, panel, w którym zespół pracuje na co dzień, i nasza opieka. Dzięki niej po roku wszystko działa tak dobrze jak pierwszego dnia. Z rozbudową możecie wrócić do nas w każdej chwili albo poprowadzić ją we własnym zespole. ### Panel z bloków zaprojektowanych pod markę Redaktor wybiera sekcję i wpisuje treść, a o układ, kolory i typografię dba sam blok. Bloki mają pola i granice, więc każda nowa podstrona pasuje do reszty, a zespół publikuje ją od ręki. Przykład Marketing Dawtony sam składa nowe podstrony dawtona.pl z 33 gotowych bloków i sam zmienia treści. [Grupa Dawtona](https://fluostudio.pl/projekty/dawtona/) ### Wersje językowe z własnymi redaktorami Każdy język ma własne treści i może mieć własnych redaktorów. Adresy i oznaczenia języków ustawiamy tak, żeby wyszukiwarka pokazywała odwiedzającym właściwą wersję. Przykład Porta PRO działa po polsku i po rumuńsku. Tłumaczenia przygotowaliśmy ze słownikiem pojęć Porta, a zespół w Rumunii edytuje swoje treści niezależnie od polskiego. [Porta PRO](https://fluostudio.pl/projekty/porta-pro/) ### Formularze, które trafiają do właściwych osób Zapytanie idzie tam, gdzie ktoś na nie odpowie: do działu, na listę mailingową albo do systemu sprzedaży. Formularz wie, z której podstrony go wysłano, więc nikt nie musi dopytywać. Przykład W Nowej Stomatologii przycisk rezerwacji jest w nagłówku, przy każdym specjaliście i w stopce, a klinika sama ustawia w panelu, czy profil prowadzi do kalendarza, czy do formularza. [Nowa Stomatologia](https://fluostudio.pl/projekty/nowa-stomatologia/) ### Strona, która nie każe czekać Najpierw ładuje się to, co widać na pierwszym ekranie, a filmy i animacje niżej dopiero wtedy, gdy odwiedzający do nich dojdzie. Szybkość mierzymy przed startem i po nim, także na telefonie. Przykład Animowane tła na pokket.pl przerobiliśmy na lżejsze pliki, a strona została tak samo głośna i kolorowa. [Pokket](https://fluostudio.pl/projekty/pokket/) ### Dostępność wpisana w projekt Kontrast, kolejność nagłówków, obsługa klawiaturą i czytnikiem ekranu: o dostępności myślimy już przy makiecie i pilnujemy jej w kodzie każdego bloku. Dzięki temu strona obywa się bez nakładki z przyciskiem w rogu, która powiększa tekst i zmienia kolory. ### Opieka, która zostaje po starcie Przez 12 miesięcy po wdrożeniu robimy aktualizacje i kopie zapasowe trzymane poza serwerem, i pilnujemy, czy strona działa. Jeśli wolicie oddać hosting w jedne ręce, kupimy w Waszym imieniu serwer VPS lub dedykowany i będziemy nim zarządzać. Przykład Serwisami Grupy BEST w pięciu krajach opiekujemy się na stałe. [Grupa BEST](https://fluostudio.pl/projekty/best-s-a/) ### Szkolenie i instrukcja, do której można wrócić Po starcie szkolimy zespół z pracy w panelu i zostawiamy instrukcję albo nagranie. Przydaje się zwłaszcza nowym osobom, które przejmują stronę po kimś innym. Przykład Zespół Acer UK po szkoleniu z CMS dostał od nas instrukcję dla nowych osób i może sam dodawać do portalu materiały, podstrony i filtry. [Acer](https://fluostudio.pl/projekty/acer/) ![Portal Acer Partner Marketing Hub na ekranach kilku telefonów.](https://fluostudio.pl/media/uslugi/strony-www/pas-acer-1600.webp) ## Porozmawiajmy o Twojej marce. Sprawdźmy, czego potrzebujesz i od czego warto zacząć. 30 MINUT · BEZ ZOBOWIĄZAŃ [Umów bezpłatną konsultację](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut) [Poproś o wycenę](https://fluostudio.pl/kontakt/) WOLISZ ZADZWONIĆ? [+48 726 220 596](tel:+48726220596) 06 Proces ## Jak pracujemy nad stroną Pracujemy w sześciu etapach, od analizy po opiekę, a pod każdym widać, co z niego zostaje u Was. Harmonogram ustalamy na początku współpracy, o postępach mówimy na bieżąco, a do kolejnego etapu przechodzimy, gdy razem zamkniemy poprzedni. 1. Etap 1 Analiza i warsztat Rynek, konkurencja, cele i to, co dziś nie działa - Analiza rynku i konkurencji - Cele strony, odbiorcy i wizerunek - Diagnoza: porządki czy nowa strona 2. Etap 2 Mapa strony i makieta Struktura, ścieżki i treści na szkicu - Mapa strony z adresami podstron - Klikalna makieta na komputer i telefon - Arkusze treści dla wzorów stron 3. Etap 3 Projekt graficzny Wygląd stron i bloków na komputer i telefon - Kierunek wyglądu i projekt najważniejszych stron - Biblioteka bloków na wszystkie podstrony - Animacje rozpisane dla programisty 4. Etap 4 Programowanie i panel Motyw, bloki w panelu i integracje - Działająca strona na serwerze testowym - Panel z blokami i wzorami stron - Formularze podłączone do Waszych systemów 5. Etap 5 Treści i testy Przeniesienie treści, przekierowania i testy - Treści na swoich miejscach, także w innych językach - Mapa przekierowań ze starych adresów - Poprawki z testów zamknięte przed startem 6. Etap 6 Start i opieka Publikacja, szkolenie i 12 miesięcy opieki - Strona pod docelowym adresem - Szkolenie i instrukcja dla zespołu - 12 miesięcy aktualizacji i kopii zapasowych #### Analiza i warsztat Na czym polega Zaczynamy od analizy rynku i konkurencji oraz warsztatów z osobami, które będą stronę prowadzić. Ustalamy cele strony, jej odbiorców, wizerunek, jaki ma budować, i to, czym Wasza oferta ma się wyróżnić. Sprawdzamy też, co dziś działa, a co nie: treści, ścieżki odwiedzających, panel, hosting i dostępy. Po co to Do projektowania przechodzimy dopiero wtedy, gdy rozumiemy Wasze potrzeby i ryzyka. Czasem wystarczy uporządkować treść i strukturę, a jeśli trzeba budować od nowa, mówimy to wprost i wyjaśniamy dlaczego. #### Mapa strony i makieta Na czym polega Porządkujemy architekturę informacji: układamy mapę strony i ścieżki dla każdej grupy odbiorców, a potem [makietę](https://fluostudio.pl/uslugi/product-design/makietowanie/): szkic każdego rodzaju podstrony z prawdziwymi treściami, jeszcze bez kolorów. Po co to Przesunięcie sekcji na makiecie zajmuje chwilę. To samo w gotowym kodzie to osobne zlecenie. #### Projekt graficzny Na czym polega Pierwszy krok to kierunek: pokazujemy trendy i wizerunek, który wynika z warsztatu. Dopiero potem przychodzi [UI/UX design](https://fluostudio.pl/uslugi/product-design/ui-ux-design/) w Waszych kolorach i krojach pisma, od stron, na których dzieje się najwięcej, po bibliotekę bloków. Każdy blok ma wersję na telefon i stany, o których łatwo zapomnieć, jak brak zdjęcia albo bardzo długi tytuł. W trakcie sprawdzamy, czy biblioteka wystarczy na wszystkie rodzaje podstron. Po co to Gdy bloki są zaprojektowane jako system, każda nowa podstrona wygląda jak część tej samej strony, nawet jeśli składa ją ktoś, kto nie jest projektantem. #### Programowanie i panel Na czym polega Programujemy stronę, najczęściej na WordPressie z własnym motywem, bez gotowych szablonów. Każdy blok z projektu dostaje w panelu swoje pola, a strona łączy się z systemami, których używacie. Po co to Motyw pisany od zera nie wozi ze sobą kodu na zapas. Redaktor widzi w panelu bloki, które zna ze strony, i od razu wie, co gdzie trafi. #### Treści i testy Na czym polega Przenosimy treści ze starej strony i uzupełniamy brakujące. Ustawiamy przekierowania ze starych adresów i testujemy stronę na telefonach, w różnych przeglądarkach i z czytnikiem ekranu. Po co to Przekierowania ze starych adresów ograniczają ryzyko spadku w Google, a testy wyłapują błędy, zanim zobaczą je klienci. #### Start i opieka Na czym polega Publikujemy stronę, szkolimy zespół z pracy w panelu i zostawiamy instrukcję. Przez 12 miesięcy po wdrożeniu robimy aktualizacje i kopie zapasowe, a potem opiekujemy się stroną dalej, jeśli tego chcecie. Po co to Strona żyje latami, więc o jej bezpieczeństwo i szybkość dbamy przez cały ten czas. 07 Realizacje ## Strony, które już robią swoje Zebraliśmy tu strony firmowe, sklepy, konfiguratory i landing page. Przy kilku sklepach przygotowaliśmy sam projekt, a wdrożył go zespół klienta. [Wszystkie realizacje](https://fluostudio.pl/projekty/) Rodzaj strony WszystkieStrony firmoweSklepyKonfiguratoryLanding page Widok Duże kadry Siatka - [![Strefa Architekta Porta na laptopie postawionym na krześle.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/porta-pro-1600.webp)Porta PRO Osobny serwis dla architektów: parametry drzwi, pliki BIM i baza wiedzy, po polsku i po rumuńsku.](https://fluostudio.pl/projekty/porta-pro/) - [![Podstrony dawtona.pl na czerwonym tle.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/dawtona-1600.webp)Grupa Dawtona Serwisy marek z jednego systemu modułów, w których marketing sam składa nowe podstrony.](https://fluostudio.pl/projekty/dawtona/) - [![Strona best.com.pl na laptopie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/best-s-a-1600.webp)Grupa BEST Strona best.com.pl i serwisy spółek grupy w pięciu krajach, na jednym systemie.](https://fluostudio.pl/projekty/best-s-a/) - [![Strona główna sklepu designoptyk.com z okularami na czerwonym tle.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/designoptyk-1600.webp)Design Optyk Sklep sieci salonów optycznych, połączony z magazynami salonów.](https://fluostudio.pl/projekty/designoptyk/) - [![Partner Marketing Hub Acer UK na kilkunastu telefonach.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/acer-1600.webp)Acer Portal, z którego partnerzy Acer UK sami pobierają materiały, i landing page kampanii w kilku krajach.](https://fluostudio.pl/projekty/acer/) - [![Karta produktu biurokoncept.pl na dwóch telefonach.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/biurokoncept-1600.webp)Biurokoncept Katalog ponad tysiąca mebli, w którym klient sam składa biurko, a handlowiec dostaje zapytanie z gotową konfiguracją.](https://fluostudio.pl/projekty/biurokoncept/) - [![Strona intimaclinic.pl na laptopie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/intima-clinic-1600.webp)Intima Clinic Serwis kliniki, w którym pacjent sam znajduje usługę, lekarza i cenę.](https://fluostudio.pl/projekty/intima-clinic/) - [![Strona główna poltreg.bio.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/poltreg-1600.webp)PolTREG Strona spółki biotechnologicznej z GPW dla pacjentów, inwestorów i partnerów, w dwóch językach.](https://fluostudio.pl/projekty/poltreg/) - [![Strona milygroup.com na tablecie leżącym na skórzanej kanapie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/mily-group-1600.webp)Mily Group Strona po angielsku, z której partner wyczyta to, o co zapytałby handlowca.](https://fluostudio.pl/projekty/mily-group/) - [Fundacja MultiSport Nowa strona fundacji, od której zaczęła się cała jej identyfikacja.](https://fluostudio.pl/projekty/fundacja-multisport/) - [![Strona 32nowastomatologia.pl na laptopie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/nowa-stomatologia-1600.webp)Nowa Stomatologia Strona kliniki, która umawia na wizytę w dwóch kliknięciach.](https://fluostudio.pl/projekty/nowa-stomatologia/) - [![Strona pet-cuisine.pl na laptopie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/petcuisine-1600.webp)PetCuisine Strona producenta karmy, na której partner wybiera rodzaj, opakowanie i smak, a potem wysyła zapytanie.](https://fluostudio.pl/projekty/petcuisine/) - [![Strona pokket.pl na żółtym tle.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/pokket-1600.webp)Pokket Strona marki tak głośna i kolorowa jak jej smaki.](https://fluostudio.pl/projekty/pokket/) - [![Strona vee.ai na telefonie trzymanym w dłoni.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/vee-1600.webp)Vee Strona vee.ai i landing page, na którym po zostawieniu numeru Vee dzwoni na żywo.](https://fluostudio.pl/projekty/vee/) - [![Strona itrons.pl na laptopie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/itrons-1600.webp)Itrons Strona firmy instalacyjnej, która od pierwszego ekranu prowadzi do jednej z pięciu marek.](https://fluostudio.pl/projekty/itrons/) - [![Projekt sklepu Overmax: strona główna, karta modelu i lista aut.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/overmax-1600.webp)Overmax Projekt sklepu z autami RC, zaczęty od karty modelu na telefonie. Sklep wdrożył zespół Overmax.](https://fluostudio.pl/projekty/overmax/) - [![Projekt sklepu itodi na tablecie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/itodi-1600.webp)Itodi Projekt sklepu mebli na wymiar z konfiguratorem, przy którym nie trzeba znać się na meblach.](https://fluostudio.pl/projekty/itodi/) - [![Projekt sklepu Zippy Tail na laptopie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/zippy-tail-1600.webp)Zippy Tail Projekt sklepu z suplementami dla psów i kotów, w tych samych kolorach co opakowania.](https://fluostudio.pl/projekty/zippy-tail/) - [![Projekt strony głównej sklepu Novicare24 na laptopie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/novicare-1600.webp)Novicare Projekt sklepu ze sprzętem rehabilitacyjnym, w którym dofinansowania są na pierwszym planie.](https://fluostudio.pl/projekty/novicare/) - [![Projekt wyszukiwarki projektów domów HomeKoncept.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/homekoncept-1600.webp)HomeKoncept Projekt serwisu z projektami domów: wyszukiwarka, karta projektu i koszyk z pakietami dodatków.](https://fluostudio.pl/projekty/homekoncept/) - [![Projekt strony DCX na laptopie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/dcx-1600.webp)DCX Projekt strony producenta systemów chłodzenia, ułożonej jak witryna salonu z elektroniką.](https://fluostudio.pl/projekty/dcx/) - [Septima Design Strona pracowni wnętrz, na której każdy mebel ma podstronę z danymi technicznymi i kartą do pobrania.](https://fluostudio.pl/projekty/septima-design/) - [![Strona hanadesign.pl na laptopie.](https://fluostudio.pl/media/uslugi/strony-www/realizacje/hana-design-1600.webp)Hana Design Strona dystrybutora mebli z konfiguratorem: klient wybiera warianty produktu i wysyła zapytanie do handlowca.](https://fluostudio.pl/projekty/hana-design/) 08 Zakres ## Co składa się na stronę Tak wygląda nasz warsztat przy stronach. Pojęcia, które brzmią technicznie, tłumaczymy po ludzku w słowniku. ### Rodzaje stron - [Strona firmowa](https://fluostudio.pl/baza-wiedzy/slownik/strona-firmowa/) - [Sklep internetowy](https://fluostudio.pl/baza-wiedzy/slownik/sklep-internetowy/) - [Landing page](https://fluostudio.pl/baza-wiedzy/slownik/landing-page/) - [Konfigurator produktu](https://fluostudio.pl/baza-wiedzy/slownik/konfigurator-produktu/) - Strona wielojęzyczna - [Aplikacja webowa](https://fluostudio.pl/baza-wiedzy/slownik/aplikacja-webowa/) - Portal dla partnerów - Serwis dla architektów - Baza wiedzy - Strona kariery Robiliśmy to między innymi dla - [Porta PRO](https://fluostudio.pl/projekty/porta-pro/) - [Acer](https://fluostudio.pl/projekty/acer/) ### Projekt - Architektura informacji - [Mapa strony](https://fluostudio.pl/baza-wiedzy/slownik/mapa-strony/) - Makieta - [Prototyp](https://fluostudio.pl/baza-wiedzy/slownik/prototyp/) - [UX](https://fluostudio.pl/baza-wiedzy/slownik/ux/) - [UI](https://fluostudio.pl/baza-wiedzy/slownik/ui/) - [Design system](https://fluostudio.pl/baza-wiedzy/slownik/design-system/) - [Mobile first](https://fluostudio.pl/baza-wiedzy/slownik/mobile-first/) - [Responsywność](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/) - [Sekcja hero](https://fluostudio.pl/baza-wiedzy/slownik/sekcja-hero/) - [Mikrointerakcje](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/) - [UX writing](https://fluostudio.pl/baza-wiedzy/slownik/ux-writing/) - [Testy użyteczności](https://fluostudio.pl/baza-wiedzy/slownik/testy-uzytecznosci/) - [CTA](https://fluostudio.pl/baza-wiedzy/slownik/cta/) Robiliśmy to między innymi dla - [Overmax](https://fluostudio.pl/projekty/overmax/) - [Design Optyk](https://fluostudio.pl/projekty/designoptyk/) - [Hana Design](https://fluostudio.pl/projekty/hana-design/) ### Technologia i panel - [WordPress](https://fluostudio.pl/baza-wiedzy/slownik/wordpress/) - [CMS](https://fluostudio.pl/baza-wiedzy/slownik/cms/) - [Front-end](https://fluostudio.pl/baza-wiedzy/slownik/front-end/) - Własny motyw i bloki - WooCommerce - Formularze i newslettery - Integracje z systemami firmy - Konfigurator pCon - [Dane strukturalne](https://fluostudio.pl/baza-wiedzy/slownik/dane-strukturalne/) Robiliśmy to między innymi dla - [Grupa Dawtona](https://fluostudio.pl/projekty/dawtona/) - [Biurokoncept](https://fluostudio.pl/projekty/biurokoncept/) - [Nowa Stomatologia](https://fluostudio.pl/projekty/nowa-stomatologia/) ### Widoczność i opieka - [SEO](https://fluostudio.pl/baza-wiedzy/slownik/seo/) - [Meta description](https://fluostudio.pl/baza-wiedzy/slownik/meta-description/) - [Przekierowanie 301](https://fluostudio.pl/baza-wiedzy/slownik/przekierowanie-301/) - [Core Web Vitals](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/) - Dostępność cyfrowa - [Hosting](https://fluostudio.pl/baza-wiedzy/slownik/hosting/) - [Domena](https://fluostudio.pl/baza-wiedzy/slownik/domena/) - [Certyfikat SSL](https://fluostudio.pl/baza-wiedzy/slownik/certyfikat-ssl/) - Kopie zapasowe - Aktualizacje i monitoring - Szkolenie z panelu Robiliśmy to między innymi dla - [Grupa BEST](https://fluostudio.pl/projekty/best-s-a/) - [Itrons](https://fluostudio.pl/projekty/itrons/) - [Fundacja MultiSport](https://fluostudio.pl/projekty/fundacja-multisport/) 09 Pytania ## O co pytacie najczęściej Na czym budujecie strony? Dobieramy technologię do zespołu, który będzie stronę edytował. Najczęściej to WordPress z autorskim motywem, bez gotowych szablonów, a sklepy na WooCommerce. Czy po starcie sami zmienimy treści? Tak, o to w tym wszystkim chodzi. Panel składamy z bloków z polami, więc zmiana treści nie wymaga ani programisty, ani projektanta. Po starcie szkolimy zespół i zostawiamy instrukcję. Czy po zmianie strony stracimy pozycje w Google? Przenosimy treści i ustawiamy przekierowania ze starych adresów, żeby ograniczyć to ryzyko. Start planujemy razem z osobami, które prowadzą Wasze SEO, a po nim sprawdzamy raporty z Google i poprawiamy to, co trzeba. Kto przygotuje treści? Możemy przenieść i uporządkować to, co macie, albo napisać brakujące teksty. Gdy treści piszecie sami, do każdego wzoru strony dostajecie arkusz z polami, więc wiadomo, co i gdzie napisać, zanim cokolwiek trafi na stronę. Kto zajmie się hostingiem i domeną? Możemy uporządkować to, co macie, u obecnych dostawców. Jeśli wolicie oddać to w jedne ręce, kupimy w Waszym imieniu serwer VPS lub dedykowany i będziemy nim zarządzać. Wtedy odpowiedzialność za dostawców bierzemy na siebie. Co dzieje się po uruchomieniu strony? Przez 12 miesięcy po wdrożeniu robimy aktualizacje i kopie zapasowe trzymane poza serwerem. Potem możemy opiekować się stroną dalej i rozwijać ją razem z Wami. Ile trwa zrobienie strony? To zależy od wielkości strony, liczby wzorów i języków. Harmonogram ustalamy na początku współpracy, trzymamy się go i na bieżąco mówimy, na jakim etapie jest praca. Grupa Dawtona napisała nam o stronie PetCuisine: *„Całość realizacji została przeprowadzona zgodnie z ustalonym harmonogramem i budżetem, co szczególnie doceniamy.”* Czy przejmiecie stronę, którą zrobił ktoś inny? Tak. Najpierw sprawdzamy kod, wtyczki, hosting i dostępy, a potem mówimy, co da się zostawić, a co trzeba poprawić. Jeśli fundament jest dobry, rozwijamy stronę etapami, na tym, co już stoi. Czy podpiszecie umowę o poufności? Tak, zwykle przed pierwszym warsztatem. Czy zrobicie też portal albo panel z logowaniem? Tak. Portal dla partnerów, panel dla klientów albo narzędzie dla zespołu projektujemy i programujemy jako [aplikację webową](https://fluostudio.pl/uslugi/product-design/aplikacje-webowe/).