SoftSPM — projekt nowej strony internetowej
Dokumentacja projektowa · wersja 1.0 · sierpień 2026 · makieta: SoftSPM_makieta.html
1. Cel i założenia
Nowa strona SoftSPM zachowuje dotychczasowy charakter i zakres firmy (system sterowania pompami głębinowymi), ale przenosi ciężar komunikacji na nowe produkty: szkolenia, konsulting i webinaria dla branży wodociągowo-kanalizacyjnej. Główny przekaz: wiedza i doświadczenie praktyków od 2014 roku — programy budowane na rzeczywistych wdrożeniach, nie na slajdach.
- Główne CTA: zapis na szkolenie / umówienie konsultacji.
- System SoftSPM prezentowany jako źródło wiedzy — sekcja pod koniec strony.
- Ekosystem (wodociagowiec.pl, gieldakomunalna.pl, platforma kursowa) — wzmianka w stopce.
- Języki: polski + wersja angielska strony głównej.
2. Struktura serwisu
| Strona | Plik | Zawartość |
|---|
| Strona główna (PL) | index.html | Hero · Doświadczenie w liczbach (arkusz techniczny) · Oferta (szkolenia / konsulting / webinaria) · Najbliższe terminy · Platforma kursowa · System SoftSPM · Opinia · Newsletter · Stopka z ekosystemem |
| Szkolenia / Webinaria | szkolenia.html | Hero · 5 ścieżek tematycznych · Format szkolenia (arkusz) · Terminy · Webinaria + pakiet roczny · Zgłoszenie |
| Konsulting | konsulting.html | Hero · Zakres usług (audyt, dobór pomp, SCADA, cyfryzacja) · Przebieg współpracy w 3 krokach · Opinia · Bezpłatna rozmowa wstępna |
| Strona główna (EN) | index-en.html | Angielskie lustro strony głównej |
3. Ścieżki tematyczne szkoleń
- Eksploatacja i diagnostyka pomp głębinowych
- Optymalizacja energetyczna SUW
- Monitoring i SCADA / IoT — predykcja awarii
- Cyfryzacja przedsiębiorstw wod-kan
- Prawo i taryfy (cykl webinariów)
4. Design — system „Industry" (HydroNexis)
Strona konsekwentnie stosuje styl wireframe/blueprint: jasne techniczne tło, stalowo-niebieski akcent, kwadratowe narożniki z krzyżykami rejestracyjnymi („+"), karty jako rysunki liniowe bez wypełnienia, zdjęcia w duotonie akcentu. Liczby i parametry prezentowane jako arkusze techniczne (tabela spec z nagłówkiem rewizji).
4.1. Kolorystyka
| Rola | Wartość | Zastosowanie |
|---|
| Tło | #f2f2f3 | Jasny techniczny grunt całej strony |
| Tekst | #1d1f20 | Treść, nagłówki |
| Akcent (stalowy) | #5980a6 | Przyciski primary, tagi, linki, duotone zdjęć |
| Akcent ciemny (700–900) | ramp OKLCH | Tekst akcentowy w rozmiarze akapitu, stany pressed |
Zasada: jedna barwa akcentu, bez dodatkowych kolorów dekoracyjnych. Tinty i stany hover z tonalnej skali 100–900.
4.2. Typografia
| Rola | Krój | Charakter |
|---|
| Nagłówki | Barlow Condensed | Skondensowane, wersaliki w tytułach sekcji i tabel |
| Tekst | Barlow | Czytelny grotesk, interlinia rytmu 24px |
4.3. Komponenty
- Przyciski: primary — jedyny pełny obiekt (wypełnienie akcentem, kwadratowe rogi, znaczniki narożne); ghost — obrys.
- Karty ofertowe: ramka włoskowa + 4 krzyżyki narożne, bez tła.
- Arkusz techniczny („plate"): tabela spec z paskiem tytułowym (kod, rewizja, numer arkusza) — nośnik liczb i parametrów.
- Tabela terminów: data tabelaryczna, temat w Barlow Condensed, tagi Szkolenie/Webinar, link „Zapisz się →"; na mobile wiersze składają się do kart.
- Zdjęcia: zawsze w duotonie akcentu, w ramce blueprint.
- Ikony: Lucide, stroke 1.5.
5. Treści do potwierdzenia przed publikacją
- Liczby w sekcji „Doświadczenie w liczbach" (480+ przeszkolonych, 24 webinaria/rok, 60+ wdrożeń) — wartości przykładowe.
- Referencje/cytaty — przykładowe, do zastąpienia prawdziwymi.
- Nazwa i adres platformy kursowej (linki „Przejdź do platformy").
- Terminy szkoleń i cennik pakietu rocznego webinariów.
- Zdjęcia z obiektów (obecnie placeholder w duotonie).
6. Następne kroki
- Akceptacja struktury i treści makiety.
- Podpięcie formularzy (zapisy, newsletter) do systemu mailingowego.
- Integracja kalendarza terminów z platformą kursową.
- Sesja zdjęciowa na obiektach lub wybór zdjęć archiwalnych.