waterStowarzyszenie · Kaliszany, gm. Wągrowiec

Nurasek.pl.Strona, na której schodzi się pod wodę.

Pierwsza strona stowarzyszenia nurków, które sprząta dna jezior wokół Wągrowca. Przewijanie działa jak zanurzanie: głębokościomierz odlicza metry, woda ciemnieje, a pod spodem jest zwykły WordPress, w którym stowarzyszenie samo dodaje relacje z akcji.

Zobacz stronę na żywoopen_in_new arrow_backInne realizacje

scuba_divingScroll jako zanurzanie

edit_noteEdycja w WordPressie

scheduleBrief → produkcja w 4 dni

Baner strony Nurasek.pl — okoń wśród roślin pod wodą i hasło Sprzątamy dna jezior i rzek

Punkt wyjścia

Akcje pod wodą, a w sieci tylko Facebook

Stowarzyszenie Nurasek.pl z Kaliszan od lat wyciąga z jezior opony, butelki i stare sieci — na Kaliszańskim, Kobyleckim, Durowskim i kilku innych. Wszystko, co o tym wiadomo, było na profilu na Facebooku, który bez logowania pokazuje tylko kilka ostatnich postów.

Zadanie z briefu: wizytówka z aktualnościami, galerią, mapą i formularzem, ton „na Ty”, zieleń i subtelne animacje — w dwa tygodnie i w budżecie małej organizacji. Do tego panel, w którym wolontariusze sami opublikują relację z kolejnej akcji.

Sekcja O nas — opis stowarzyszenia, zdjęcie ekipy w czerwonych czapkach nad jeziorem i liczby z akcji — Sekcja O nas, metka −1 m — teksty stowarzyszenia przeniesione 1:1

Koncepcja

Przewijanie strony to schodzenie na dno jeziora

Nurkowie myślą metrami, więc strona też. Od banera przy powierzchni do formularza kontaktowego na −17 m każda sekcja leży trochę głębiej, a efekty podkreślają to bez odciągania uwagi od treści.

straighten

Głębokościomierz przy krawędzi ekranu

Skala od 0 do 18 m pokazuje, na jakiej „głębokości” jest czytelnik. Każda sekcja ma swoją metkę: O nas −1 m, Działania −6 m, Kontakt −17 m.

gradient

Woda ciemnieje z głębokością

Tło przechodzi od jasnej zieleni przy powierzchni do ciemnej toni przy dnie — tak jak światło w jeziorze.

wb_sunny

Promienie i bąbelki w banerze

Światło przebijające się przez wodę i bąbelki rysowane na canvasie, bez bibliotek i bez ciężkiego wideo w tle.

grain

Zawiesina w toni

Drobinki unoszące się za treścią — na stronie głównej, w aktualnościach i we wpisach, żeby cała strona była „pod wodą”.

bubble_chart

Bąbelki po wysłaniu formularza

Wiadomość „wypływa” na powierzchnię — mały szczegół, który mówi, że formularz zadziałał.

motion_photos_off

Animacje można wyłączyć

Strona szanuje systemowe „ogranicz ruch”, a w stopce jest przełącznik „Wyłącz animacje” zapamiętywany w przeglądarce.

Sekcja Obszary działania — trzy karty: ekologia, edukacja, badania i kultura, a przy prawej krawędzi głębokościomierz na −6 m — Działania na −6 m — głębokościomierz przy prawej krawędzi

Galeria Pod powierzchnią naszych jezior — nurkowie, okoń, rak, podwodne łąki i śmieci na dnie — Galeria na −13 m — zdjęcia: Baza Nurkowa Kaliszany i Nurasek.pl

Mapa jezior

Nowe jezioro dodaje się linkiem, nie programistą

Pod opisem działań jest lista jezior, o które dba stowarzyszenie, i interaktywna mapa. Punkty na mapie biorą się z linków w tej liście: wystarczy dopisać jezioro, zaznaczyć nazwę i wkleić adres z OpenStreetMap albo Map Google.

Kliknięcie nazwy przesuwa mapę do jeziora, przycisk „Wszystkie jeziora” pokazuje całą okolicę Wągrowca. Mapa korzysta z OpenStreetMap, a biblioteka Leaflet leży na serwerze strony — bez ciasteczek Google przed zgodą.

Lista jezior Kaliszańskie, Kobyleckie, Durowskie, Stępuchowskie, Włókna i Stobno nad mapą okolic Wągrowca z zaznaczonymi punktami — Sześć jezior wokół Wągrowca — punkty z linków w liście

Aktualności

Relacje z akcji, które nie znikają w osi czasu Facebooka

Posty o sprzątaniu Durowskiego i Kobyleckiego przeszły z Facebooka na stronę, razem ze zdjęciami. Teraz każda akcja ma własny adres, który można podesłać urzędowi, sponsorowi albo lokalnej gazecie, a pod listą aktualności jest zapis na e-mail o kolejnych akcjach („Nie przegap kolejnej akcji”).

Sekcja Aktualności — trzy karty relacji z akcji sprzątania jezior z datami i zdjęciami ekipy — Trzy najnowsze wpisy trafiają na stronę główną same

Wpis Czyste jeziora — wspólna sprawa: zdjęcie ekipy przy pomniku Neptuna jako nagłówek i treść relacji — Wpis — obrazek wyróżniający jest od razu nagłówkiem

Na telefonie

Menu jak tabela przystanków dekompresyjnych

Domyślne rozwijane menu motywu zastąpiła pełnoekranowa nakładka: duże pozycje z głębokością każdej sekcji, a na dole telefon, e-mail, WhatsApp i Facebook — żeby z akcji nad jeziorem dało się zadzwonić jednym kciukiem.

Baner Nurasek.pl na telefonie — hasło i przyciski Dołącz do akcji oraz Zobacz, co robimy — Baner

Pełnoekranowe menu mobilne z głębokością każdej sekcji, telefonem, e-mailem i przyciskiem WhatsApp — Menu z głębokościami

Sekcja Obszary działania na telefonie — nurek nad starą siecią rybacką na dnie — Obszary działania

Karta aktualności na telefonie — relacja ze sprzątania jeziora — Aktualności

Panel dla stowarzyszenia

Efekty działają same, wolontariusz tylko pisze

Cała „podwodna” warstwa siedzi we własnej wtyczce, której nie widać w panelu. Stowarzyszenie pracuje w zwykłym WordPressie: głębokości, bąbelki i punkty na mapie ustawiają się same, bez proszenia informatyka o każdą zmianę.

edit_square

Edycja jak w dokumencie

Teksty i zdjęcia na stronie głównej zmienia się w edytorze bloków: klik w tekst i pisanie, klik w zdjęcie i „Zamień”.

lock

Sekcje zablokowane przed wypadkiem

Układu strony głównej nie da się przypadkiem usunąć ani przestawić — treść edytuje się normalnie, struktura zostaje.

help

Instrukcja w kokpicie

Po zalogowaniu stowarzyszenie widzi siedem kroków: jak dodać aktualność, jezioro na mapie, zdjęcie do galerii, gdzie są wiadomości.

auto_awesome_motion

Aktualności same trafiają na główną

Trzy najnowsze wpisy pojawiają się na stronie głównej jako karty. Obrazek wyróżniający od razu jest też nagłówkiem wpisu.

inbox

Wiadomości w panelu

Zapytania z formularza i zapisy na powiadomienia o akcjach zapisują się też w skrzynce w WordPressie, więc nic nie ginie, nawet gdy mail utknie w spamie.

contact_phone

Dane kontaktowe w jednym miejscu

Telefon, e-mail i adres ustawia się raz w ustawieniach — trafiają do menu mobilnego i do danych organizacji dla Google.

SEO i prywatność

Google ma wiedzieć, że to organizacja z Kaliszan

Strona jest nowa, więc najważniejsze było przedstawienie stowarzyszenia wyszukiwarce: kim jest, gdzie działa i jak się z nim skontaktować. Yoast SEO dostał pełną konfigurację, a dane organizacji uzupełnia własny kod.

apartmentDane strukturalne NGO z adresem w Kaliszanach i obszarem działania wokół Wągrowca
smart_displayVideoObject dla filmu z bloku Wideo — generowany przez własny kod, bez płatnego dodatku
travel_exploreTytuły i opisy pod lokalne frazy, mapa witryny XML, duplikaty archiwów wyłączone z indeksu
shareObraz do udostępnień 1200×630 dla Facebooka i komunikatorów
cookieBaner zgód na ciasteczka, a mapy z OpenStreetMap — bez ciasteczek reklamowych przed zgodą
speedFonty serwowane z serwera strony, film 25 MB ładowany dopiero po kliknięciu „odtwórz”

Przebieg projektu

Od briefu do nurasek.pl w cztery dni

Dzień 1–2
Brief i wersja testowa
Koncepcja „zanurzania”, sekcje i efekty, mapa jezior, aktualności przeniesione z Facebooka, menu mobilne.
Dzień 3
Materiały od klienta
Teksty o celach 1:1, logo wycięte z pliku Illustratora, zdjęcia podwodne z Bazy Nurkowej Kaliszany.
Dzień 4
Film, SEO i produkcja
Sekcja z filmem, konfiguracja Yoast SEO z danymi organizacji, przeniesienie na nurasek.pl.

Stack technologiczny

Gotowy motyw na wierzchu, własny kod pod powierzchnią

WordPress

check_circleMotyw Green Globe (Bizberg)
check_circleEdytor bloków z zablokowanym układem
check_circleContact Form 7 + skrzynka Flamingo
check_circleYoast SEO + baner zgód

Własny mu-plugin

check_circleSzablon strony głównej z sekcji
check_circleKolory, fonty i tłumaczenia motywu
check_circleSchema NGO i VideoObject
check_circleShortcode’y: aktualności, mapy

Front-end

check_circleEfekty podwodne w czystym JS (canvas)
check_circleLeaflet hostowany lokalnie
check_circleBricolage Grotesque + Figtree
check_circleprefers-reduced-motion + przełącznik

Stowarzyszenie, klub, fundacja?

Pokażmy, co robicie, poza Facebookiem

Strona z charakterem i panelem, w którym sami dodacie relację z każdej akcji. Działam z Wągrowca, więc mogę też przyjechać i pogadać na miejscu.

Napisz do mniearrow_forward webStrony internetowe