Przejdź do treści
Kontakt
Dostępność Dostosuj widok
Wielkość tekstuPowiększa tekst strony — 4 stopnie, do ok. 200%. Pasek menu rośnie wolniej.

Brand & Web Design

Brand & Web Design

Marka, która porządkuje przekaz. Strona, która pracuje na wynik.

Projektujemy identyfikację i strony internetowe dla firm, które potrzebują więcej niż ładnego układu. Strategia marki, UX, treść, SEO i wdrożenie w WordPress/Divi powstają u nas jako jeden system komunikacji.

Porozmawiajmy o Państwa stronie Zobacz, jak uporządkować markę i ofertę

Strona B2B ma prowadzić decyzję

Dobra strona jest narzędziem zaufania, sprzedaży, rekrutacji i obsługi klienta, dlatego musi jasno wyjaśniać, komu Państwo pomagają, w czym są dobrzy i dlaczego warto zrobić kolejny krok.

Diagnoza komunikacji

Gdzie strony B2B tracą klienta

Największy problem rzadko leży w kolorach. Zaczyna się wtedy, gdy marka mówi zbyt ogólnie, oferta wymaga zbyt wielu wyjaśnień, a użytkownik sam musi odgadywać, co firma robi, dla kogo pracuje i jaki daje efekt.

Aktywny sygnał

Oferta

Użytkownik powinien rozumieć sens oferty, zanim dotrze do formularza.

Od pozycjonowania marki do wdrożenia strony

Zakres układamy w stałej kolejności: najpierw przekaz i architektura, potem identyfikacja, UX, treść, projekt i wdrożenie.

Sześć kompetencji w jednym ciągu decyzji

Każdy etap ustawia warunki dla następnego. Dzięki temu marka, treść, warstwa wizualna i WordPress powstają razem, zamiast jako osobne warstwy sklejane przy wdrożeniu.

strategia

Marka i przekaz

Pozycjonowanie, obietnica wartości, ton komunikacji i główne argumenty dla klienta.

UX

Architektura informacji

Struktura strony, menu, ścieżki użytkownika, sekcje usług, CTA i formularze.

treść

Content i SEO

Treści eksperckie, zrozumiałe i napisane pod pytania użytkownika oraz wyszukiwarkę.

Divi

Wdrożenie i rozwój

WordPress/Divi, responsywność, edycja treści i komponenty gotowe do dalszej rozbudowy.

Brand-to-Web System

Strona działa jak układ połączonych decyzji: marka określa sens, UX prowadzi użytkownika, treść tłumaczy wartość, a Divi pozwala rozwijać system bez przebudowy od zera.

Marka

Marka: co firma ma znaczyć

Marka to decyzja o tym, jak firma ma być rozumiana, komu pomaga i dlaczego jej oferta zasługuje na uwagę.

Porządkujemy pozycjonowanie, obietnicę wartości, ton komunikacji, argumenty sprzedażowe i język oferty. Dzięki temu projekt graficzny oraz architektura strony mają jasny punkt odniesienia zamiast serii intuicyjnych decyzji estetycznych.

Znaczenie

Dobrze ustawiona marka skraca dystans między pierwszym kontaktem a zaufaniem. Użytkownik szybciej rozumie, gdzie trafił, czy oferta jest dla niego i jaki następny krok ma sens.

Wynik

  • pozycjonowanie
  • obietnica wartości
  • język oferty
  • ton komunikacji
  • argumenty sprzedażowe

Ta sama strona, warstwa po warstwieMarka · 3 elementy

Od decyzji do mapy

Konfigurator serwisu

System marki i strony brzmi abstrakcyjnie, dopóki nie zamieni się w listę podstron, komponentów i tygodni. Proszę zaznaczyć cztery rzeczy po lewej: kim Państwo są, co strona ma robić, ile jest usług i czego jeszcze potrzeba. Mapa serwisu po prawej przebuduje się na bieżąco, a pod nią stanie rachunek: ile podstron, ile komponentów do zaprojektowania i które z sześciu kompetencji wchodzą w zakres.

Kim Państwo są
Co strona ma robić można wybrać kilka
Czego jeszcze potrzeba

Liczby są orientacyjne i służą rozmowie, wycena powstaje osobno. Czas liczymy z pięciu etapów procesu. Podstrony usług projektuje się raz jako wzorzec, a potem powiela, dlatego dziesiąta usługa kosztuje ułamek tego, co pierwsza.

Mapa serwisu

Mapa serwisu: strona główna i pięć podstron.

  • 14podstron
  • 21komponentów do zaprojektowania
  • 14–18tygodni od diagnozy do publikacji

Kompetencje w zakresie

  • Marka i przekazzawsze
  • Identyfikacja—
  • Architektura informacjizawsze
  • Content i SEOzawsze
  • System wizualnyzawsze
  • Wdrożenie i rozwójzawsze

Rezultat

Co klient otrzymuje po zakończeniu prac

Efektem jest system komunikacji, który można wdrożyć, rozwijać i wykorzystywać w sprzedaży, rekrutacji oraz kampaniach.

Co zmienia się dla użytkownika

Każdy rezultat ma praktyczne zastosowanie: porządkuje ofertę, wzmacnia zaufanie albo ułatwia rozwój strony po publikacji.

Jasne pozycjonowanie marki

Uporządkowany język oferty, wartości i argumentów, które użytkownik może szybko zrozumieć.

Spójna identyfikacja wizualna

System gotowy do użycia online i w materiałach firmowych: kolor, typografia, key visual i zasady stosowania.

Struktura pod użytkownika, SEO i konwersję

Architektura informacji prowadząca od pierwszego kontaktu do zrozumienia oferty i wysłania zapytania.

Content bez przesadnego marketingu

Treści eksperckie, krótkie i czytelne online. Tłumaczą wartość zamiast zasłaniać ją językiem broszury.

Komponenty gotowe do wdrożenia w Divi

Układ sekcji, CTA, kart, FAQ i interakcji zgodny z możliwościami WordPress/Divi.

Podstawa do dalszego rozwoju strony

System możliwy do rozszerzania o strony kampanii, blog, opisy wdrożeń i automatyzację marketingu.

Dla kogo pracujemy

Usługa szczególnie dobrze sprawdza się tam, gdzie oferta jest złożona, wymaga zaufania i musi być przedstawiona prosto: bez branżowego żargonu, ale z zachowaniem eksperckiego charakteru.

Jak pracujemy

Proces jest prosty: najpierw diagnoza, potem strategia, projekt, wdrożenie i rozwój po publikacji. Do układu graficznego przechodzimy, gdy wiadomo, co strona ma powiedzieć.

Proces projektowy

Pięć etapów, każdy z własnym wynikiem

Każdy etap zamyka konkretną decyzję i przygotowuje materiał wejściowy dla następnego. Proszę przełączać etapy: podgląd obok pokazuje, co z tej samej strony zostaje po każdym z nich.

wejście: materiał źródłowy

Diagnoza

Marka, oferta, konkurencja, obecna strona, luki w komunikacji i przeszkody na drodze do zapytania.

Co się dzieje
Czytamy wszystko, co dziś mówi za firmę: stronę, oferty, prezentacje, wpisy. Sprawdzamy, gdzie użytkownik odpada, i zestawiamy to z tym, jak mówi konkurencja.
Co Państwo dostają
Raport diagnozy z listą luk i barier, mapa obecnej strony z miejscami, w których ścieżka się urywa, i lista pytań, na które oferta nie odpowiada.
Ile trwa
1–2 tygodnie

System wizualny w praktyce

Pulpit marki: trzy liczby do sprawdzenia

Kontrast pary kolorów, krok skali pisma i waga pierwszego ekranu to liczby, nie kwestia gustu. One decydują, czy stronę da się przeczytać w słońcu, czy nagłówki zachowają proporcje po dołożeniu piątego stopnia i czy ktoś doczeka końca ładowania. Pulpit niżej rysuje z nich żywą mini-stronę. Trzy instrumenty pod nim liczą każdą z osobna i otwierają się, gdy Państwo chcą zajrzeć głębiej.

Kolor wiodący
Krój pisma
Temperament
Gęstość
Podłoże
Przyciski
Pierwszy ekran
Karty

Kolor i podłoże są tą samą parą, którą liczy sprawdzarka kontrastu niżej. Rozmiar bazowy i krok skali to te same suwaki, co w skali typograficznej. Waga bierze się z budżetu. Przesunięcie czegokolwiek w instrumentach zmienia ten podgląd, i odwrotnie.

Tekst na podłożu

20,71: 1

próg 4,5 : 1

zdane

Kolor wiodący na podłożu

7,42: 1

próg 3 : 1

zdane

Napis na przycisku

9,10: 1

próg 4,5 : 1

zdane

Waga pierwszego ekranu

905kB

próg 2,5 s na LTE

zdane

Instrumenty: każdy liczy jedną rzecz z pulpitu

Sprawdzarka kontrastu

Tło
Tekst

Wsparcie inwestycji

Tak wygląda akapit zapisany w tej parze kolorów. Jeżeli czytanie tego zdania męczy oczy po dwóch linijkach, wynik obok tylko to potwierdzi.

Drobny druk: przypisy, podpisy pod zdjęciami, etykiety pól formularza.

21,00: 1

stosunek kontrastu (WCAG 2.2, luminancja względna sRGB)

  • Tekst zwykły poniżej 24 pxwymaga 4,5 : 1zdane
  • Tekst zwykły — poziom wyższy AAAwymaga 7 : 1zdane
  • Tekst duży od 24 px albo 18,7 px pogrubionywymaga 3 : 1zdane
  • Obwódki pól, ikony ze znaczeniemwymaga 3 : 1zdane

Progi pochodzą z kryteriów 1.4.3 i 1.4.11 wytycznych WCAG 2.2, tych samych, do których odsyła polska ustawa o dostępności cyfrowej. Elementy czysto ozdobne progu nie mają, ale „ozdobny” znaczy: strona działa tak samo, gdy zniknie.

Druga zasada

Kolor nie może być jedynym nośnikiem znaczenia

Około ośmiu procent mężczyzn i pół procent kobiet pochodzenia europejskiego ma zaburzenie rozróżniania barw, najczęściej czerwieni i zieleni. Do tego dochodzą wydruki czarno-białe, ekrany w słońcu i tryb oszczędzania energii. Dlatego stan zapisujemy słowem albo kształtem, a kolor dokładamy jako trzecie potwierdzenie, nigdy jako jedyne.

Tak nie

  • Zgodne
  • Do sprawdzenia
  • Niezgodne

Po odbarwieniu zostają trzy identyczne kropki.

Tak tak

  • Zgodne
  • Do sprawdzenia
  • Niezgodne

Kształt i słowo działają bez koloru; kolor tylko przyspiesza.

próba z kryterium 1.4.4: treść ma zostać czytelna i kompletna po powiększeniu do 200 %
Nagłówek strony68 px

Marka i strona

Nagłówek sekcji54 px

Cztery kontrole

Nagłówek bloku43 px

Pole ochronne znaku

Lead34 px

Zdanie, które wprowadza w temat sekcji.

Tekst zwykły27 px

Podstawowy stopień, w którym napisana jest większość strony.

Drobne22 px

Podpisy, przypisy, etykiety pól.

Długość wiersza

Dobra kolumna tekstu ma od czterdziestu pięciu do siedemdziesięciu pięciu znaków w wierszu, licząc spacje. Poniżej tej granicy oko skacze do nowego wiersza za często i gubi rytm czytania; powyżej ma kłopot z trafieniem w początek następnego wiersza i wraca do tego samego zdania po raz drugi.

62 znaków w wierszu w zakresie 45–75

Liczba jest mierzona w przeglądarce: skrypt liczy wiersze, na które rozpadł się ten akapit, i dzieli przez nie długość tekstu. Odczyt szerokości też jest zmierzony, nie przepisany z suwaka. Na wąskim ekranie kolumna nie zmieści się w całości i wtedy liczba mówi, ile jej faktycznie zostało.

Na tej stronie skala nie jest wpisana na sztywno: rozmiary rosną razem z szerokością okna i mają zapisane wartości brzegowe. Dzięki temu ten sam nagłówek ma sens i na telefonie, i na ekranie 27 cali, a redakcja nie ustawia rozmiarów ręcznie.

Co ładuje się w pierwszym ekranie

Ostatnia pozycja to zwykle mapy, czaty, testy A/B i skrypty reklamowe. Każde z nich dokłada wagę, a część z nich wymaga zgody użytkownika, zanim w ogóle się załaduje.

1 205kB

łączny transfer pierwszego ekranu

  • Zdjęcia460 kB
  • Pismo75 kB
  • Skrypty310 kB
  • Reszta strony60 kB
Czas pobrania przy trzech prędkościach łącza
ŁączeCzas pobraniaWobec progu 2,5 s
Wolne 3G 1,6 Mb/s6,0 s
LTE w ruchu 10 Mb/s1,0 s
Światłowód 100 Mb/s0,1 s

Próg 2,5 sekundy to granica dobrego wyniku dla największego elementu widocznego w pierwszym ekranie, jednej z trzech miar, którymi Google opisuje jakość wczytywania. Sam transfer jest tylko częścią tego czasu: dochodzi połączenie, odpowiedź serwera i rysowanie strony.

Z własnego podwórka

Bibliotekę zdjęć tego serwisu, 674 pliki, przeliczyliśmy z formatu PNG na WebP przy jakości 82 i najdłuższym boku 1600 pikseli. Waga spadła o 93 procent, a różnicy nie widać na ekranie. To był jeden wieczór pracy i największa pojedyncza oszczędność w całym projekcie: żadna optymalizacja kodu nie zbliżyła się do tego rzędu wielkości.

Identyfikacja

Znak w ośmiu trudnych warunkach

Logo prawie zawsze wygląda dobrze na białej planszy w prezentacji. Kłopoty zaczynają się w miejscach, o których nikt nie myślał przy projektowaniu: na zakładce przeglądarki, na pieczątce, na koszulce, na zdjęciu z realizacji. To druga z sześciu kompetencji pokazana od środka: ten sam plik w ośmiu takich warunkach, na naszym własnym znaku, bo na nim najłatwiej pokazać ograniczenia.

Znak GROAH: słupki, napis GROAH i podpis GROwth AHead Znak GROAH bez podpisu Sam napis GROAH

Pełny znak, punkt odniesienia

Trzy części: słupki, napis i podpis „GROwth AHead”. Wszystko, co dalej, jest odejmowaniem: im mniej miejsca albo im gorsza technika reprodukcji, tym mniej części znaku zostaje.

Co to wymusza: jeden plik wektorowy jako źródło i lista wersji pochodnych z zapisanym progiem, od którego się ich używa. Bez tego wersje rozmnażają się same.

Zgodność

Cztery kontrole, przez które przechodzi każda strona

Tu leży różnica między stroną z agencji kreatywnej a stroną, która ma przetrwać kontrolę. Cztery poniższe sprawy rozstrzyga się na etapie projektu, bo dorobienie ich później zwykle oznacza przebudowę. Proszę wybrać kontrolę, żeby zobaczyć, co, kto i z jakim skutkiem sprawdza.

Czy treść da się przeczytać, obsłużyć samą klawiaturą i zrozumieć, gdy ktoś nie widzi ekranu albo widzi go słabo.

Co jest sprawdzane
kontrast, kolejność wędrówki klawiszem Tab, widoczne ognisko, opisy alternatywne, etykiety i komunikaty błędów w formularzach, zachowanie strony po powiększeniu tekstu do 200 procent, praca z czytnikiem ekranu.
Kto sprawdza
przede wszystkim użytkownik. Formalnie: podmioty publiczne obowiązuje ustawa z 4 kwietnia 2019 roku o dostępności cyfrowej wraz z deklaracją dostępności i drogą skargową. Od 28 czerwca 2025 roku dochodzi europejski akt o dostępności, który obejmuje także część firm, między innymi handel elektroniczny, usługi bankowe dla konsumentów i książki elektroniczne.
Czym kończy się brak
skargą, wezwaniem do usunięcia naruszenia, a w przypadku podmiotów publicznych karą pieniężną. W zamówieniach publicznych bywa gorzej: niezgodna strona nie przechodzi odbioru, a wykonawca poprawia ją na własny koszt.
Co z tym robimy
kontrast i ognisko są wpisane w system od pierwszego dnia, obsługa klawiaturą jest pierwszym sposobem obsługi, a każdy komponent przechodzi próbę powiększenia. Pełną ocenę zgodności i deklarację prowadzi osobna usługa — analiza dostępności.

Divi 4 / utrzymanie

Utrzymanie po publikacji

Oddajemy system sekcji, klas i komponentów, który redakcja edytuje sama, a kolejne podstrony powstają z tych samych elementów bez przebudowy całości.

StrukturaGlobalna baza stylów
Hero, nawigacja i podstawowe sekcje pozostają zgodne z istniejącą biblioteką projektu.
RozwójLokalne rozszerzenia
Nowe komponenty mają własne klasy i nie wpływają na pozostałe części strony.
InterakcjeLekki skrypt bez bibliotek
Interakcje wspierają orientację i kolejność treści, bez przejmowania przewijania i ciężkich bibliotek.
EdycjaKomponenty do utrzymania
Treści, zdjęcia i kolejne podstrony mogą być rozwijane bez przebudowy całego systemu.

Na czym to stoi

Na czym stoi strona

Lista jest krótka celowo. Każda z tych technologii ma dwadzieścia lat historii, dokumentację po polsku i ludzi, którzy potrafią ją utrzymać w każdym mieście, więc strona nie jest zależna od nas.

  • HTML5Semantyczna struktura: nagłówki, listy i formularze, które rozumie czytnik ekranu i wyszukiwarka.
  • CSS3Jeden globalny arkusz systemu i cienka warstwa na podstronę: zmienne, siatki, zapytania o ruch i kontrast.
  • JavaScriptCzysty, bez bibliotek. Interakcje wspierają treść i gasną przy „mniej ruchu”; bez skryptu strona jest kompletna.
  • WordPressPanel, w którym redakcja pracuje sama; kopie, aktualizacje i osobę do utrzymania da się znaleźć wszędzie.
  • Divi 4Sekcje, rzędy i moduły jako komponenty do powielania; własne klasy zamiast walki z szablonem.

Powiązane usługi

Marka i strona rzadko są osobnym projektem. Zwykle są częścią czegoś większego: wdrożenia, dotacji albo porządkowania sposobu, w jaki organizacja pracuje.

Biznesplan

Przekładamy zamiar inwestycyjny na liczby: co powstanie, jakim kosztem, z jakich źródeł i po czym poznać, że cel został osiągnięty.

Sztuczna inteligencja

Gdzie AI realnie skraca proces, a gdzie tylko dokłada kosztu.

Wycena technologii i przedsiębiorstwa

Liczymy wartość firmy, udziałów albo technologii. Standard wartości dobieramy do pytania, na które wycena ma odpowiedzieć.

Analiza dostępności

Pełna ocena zgodności — tam, gdzie potrzebny jest dokument.

Due diligence

Sprawdzamy spółki, projekty i aktywa przed zakupem, sprzedażą albo wejściem inwestora. Pokazujemy, co stoi za liczbami, umowami i prognozami.

Transformacja cyfrowa i cyberbezpieczeństwo

Procesy, dane i technologia z planem wdrożenia, nie listą rekomendacji.

Pierwsza rozmowa o stronie

W pierwszej rozmowie ustalimy:

  • co dziś nie działa i po czym to widać,
  • gdzie dziś urywa się ścieżka od pierwszego kontaktu do zapytania,
  • kto po Państwa stronie decyduje i kto będzie prowadził stronę później,
  • czy w tle jest dotacja, zamówienie publiczne albo termin, którego nie da się przesunąć,
  • czy któraś z czterech kontroli, czyli dostępność, oznaczenia, zgody albo prawa, już się o Państwa upomniała.

Przejdź do formularza

Kontakt

E-mail: kontakt@groah.pl

Telefon: +48 514 549 693

Telefon: +48 538 397 485

GROAH Sp. z o.o., ul. Icchoka Malmeda 7, 15-440 Białystok

Proszę opisać sytuację

* pola wymagane

    Odpowiedź wraca w dwa dni robocze i od razu jest w niej nasza pierwsza ocena: co w obecnej komunikacji zatrzymuje decyzję oraz od czego zaczęlibyśmy. Nic to Państwa nie kosztuje i do niczego nie zobowiązuje.

    Najczęściej zadawane pytania

    Pytania, które padają w pierwszej rozmowie: o pliki, terminy, treści i o to, co się dzieje po zakończeniu współpracy.

    Tak, ale wtedy zawsze pytamy, gdzie ten znak ma się pojawić. Sam rysunek bez zapisanych wersji i progów użycia przestaje być spójny w ciągu roku, więc minimalny sensowny zakres to znak plus komplet wersji plus jedna strona zasad. Bez tego oddajemy plik, który za pół roku wróci z pytaniem, dlaczego na koszulce wygląda inaczej.

    Do wyboru: piszemy my na podstawie rozmów i Państwa materiałów, redagujemy to, co już jest, albo dostajemy gotowe teksty. Trzecia droga bywa najtrudniejsza, bo teksty pisane pod stary układ rzadko pasują do nowego. Cokolwiek wybierzemy, treść musi być gotowa przed projektowaniem, bo projekt robiony na tekście zastępczym zawsze wraca do przeróbki po wgraniu prawdziwych zdań.

    Nie musi, ale zwykle jest, z jednego powodu: Państwo mogą ją prowadzić dalej bez nas, a osobę do jej obsługi da się znaleźć w każdym mieście. Przy bardzo prostych serwisach proponujemy czasem stronę statyczną, bo jest tańsza w utrzymaniu i praktycznie nie da się jej zepsuć. Wybór zapada po architekturze treści, kiedy widać, ile rzeczy naprawdę trzeba redagować.

    Częściowo i drogo. Kontrast, opisy alternatywne czy etykiety pól rzeczywiście da się poprawić później. Ale kolejność wędrówki klawiszem Tab, struktura nagłówków i zachowanie strony po powiększeniu tekstu wynikają z układu, a układ zmienia się razem z projektem. Dlatego traktujemy dostępność jako warunek projektu zamiast pozycji na liście poprawek.

    Zależy od kroju. Część rodzin dostępnych bezpłatnie ma licencję pozwalającą na użycie i na stronie, i w dokumentach, wtedy nie ma kosztu. Kroje komercyjne licencjonuje się osobno na stronę, osobno na aplikacje i osobno na materiały drukowane, a licencja bywa liczona od liczby odsłon. Zawsze pokazujemy koszt przed decyzją, bo to jedyny element systemu, który potrafi wracać co roku.

    Do Państwa, łącznie z prawem do przerabiania. To ostatnie tylko brzmi jak formalność: bez zezwolenia na wykonywanie praw zależnych nie wolno przerobić własnego logotypu ani dołożyć podstrony w tym samym stylu bez zgody autora. W umowie mamy jedno i drugie. Wyjątkiem są rzeczy, których nikt nie może przenieść: licencje na kroje pisma i zdjęcia od dostawców. Te przekazujemy razem z rejestrem, na czyje konto zostały wykupione.

    Uporządkowanie istniejącej strony to zwykle sześć do ośmiu tygodni, pełny projekt marki i strony cztery do sześciu miesięcy. Największy wpływ na termin mają dwie rzeczy po Państwa stronie: czy jest jedna osoba decyzyjna i czy treści są gotowe. Projekty, które się przeciągają, prawie zawsze przeciągają się właśnie tam.

    Różni się trzema rzeczami: ma obowiązkowe oznaczenia i podstronę o projekcie, ma dokumentację odbioru w formie, którą przyjmuje instytucja, i ma okres, w którym nie wolno jej po prostu wyłączyć. Poza tym jest taka sama. Warto tylko pamiętać, że oznaczenia trzeba przewidzieć w projekcie, bo dokładanie ich po fakcie zwykle psuje układ nagłówka i stopki.

    Nie i uważamy to za warunek dobrze wykonanej pracy. Opieka jest osobną, dobrowolną umową i obejmuje aktualizacje, kopie zapasowe, drobne zmiany i reagowanie na awarie. Jeżeli Państwo z niej rezygnują, dostają to samo, co przy zakończeniu współpracy: pliki, dostępy, dokumentację i instrukcję. Strona, której nie da się prowadzić bez wykonawcy, jest po prostu źle zrobiona.

    Pierwsza rozmowa

    Rozmowa o marce i stronie

    Pozycjonowanie marki, identyfikacja, architektura informacji, treść i wdrożenie w WordPress/Divi dla przedsiębiorstw, jednostek samorządu, podmiotów leczniczych, uczelni oraz organizacji pozarządowych.

    Proszę opisać sytuację Napisz do GROAH

    Jeśli po rozmowie wyjdzie, że wystarczy uporządkowanie treści zamiast nowej strony, powiemy to wprost, także wtedy, gdy będzie to mniejsze zlecenie.