Słownik
Pojęcia z projektowania stron i Webflow, wyjaśnione po ludzku
Definicje pisane tak, żeby dało się je zrozumieć, z praktycznym kątem, którego słownik nie ma. Przydadzą się do rozszyfrowania briefu, oferty albo rozmowy z wykonawcą.
Projektowanie
12 pojęć
Above the fold
Above the fold to część strony widoczna bez przewijania. Określenie pochodzi z gazet, gdzie górna połowa pierwszej strony musiała sprzedać numer leżący na stoisku.
Czytaj hasłoArchitektura informacji
Architektura informacji to struktura strony: jakie podstrony istnieją, jak się grupują, po co jest każda z nich i jak odwiedzający się między nimi porusza. Ustala się ją przed projektem graficznym i to ona wyznacza, co projekt może zrobić.
Czytaj hasłoDesign system
Design system to zestaw powtarzalnych elementów, z których zbudowana jest strona: skala typografii, odstępy, kolory, komponenty i reguły ich łączenia. To on sprawia, że pięćdziesiąta podstrona jest spójna z pierwszą.
Czytaj hasłoHero section
Hero section to pierwszy ekran strony: nagłówek, zdanie pod nim, główny przycisk i zwykle obraz, widoczne przed jakimkolwiek przewinięciem. To tu większość odwiedzających decyduje, czy strona jest dla nich.
Czytaj hasłoHierarchia wizualna
Hierarchia wizualna to takie ułożenie elementów, żeby wzrok trafiał na nie w zamierzonej kolejności: rozmiar, kontrast, odstępy, kolor i położenie mówią czytelnikowi, co jest najważniejsze, zanim przeczyta choć słowo.
Czytaj hasłoIdentyfikacja wizualna
Identyfikacja wizualna to zestaw decyzji, dzięki którym firmę da się rozpoznać: logo i jego warianty, kolory, typografia, styl zdjęć i zasady ich używania. To, jak marka wygląda, w odróżnieniu od tego, czym marka jest.
Czytaj hasłoKsięga znaku
Księga znaku to dokument opisujący zasady używania identyfikacji wizualnej: warianty logo i pole ochronne, wartości kolorów i ich role, skalę typografii, kierunek zdjęć oraz rzeczy, których robić nie wolno. Bywa nazywana brandbookiem.
Czytaj hasłoMobile first
Mobile first to projektowanie i budowanie najpierw wersji na wąski ekran, a potem dodawanie złożoności dla szerszych, w oparciu o założenie, że ograniczenia wymuszają priorytety.
Czytaj hasłoRebranding
Rebranding to zmiana sposobu, w jaki firma się przedstawia: nazwy, identyfikacji wizualnej, pozycjonowania albo kilku z tych rzeczy naraz. Zakres sięga od odświeżenia logo po wymianę wszystkiego, co rynek dziś rozpoznaje.
Czytaj hasłoStrona responsywna (RWD)
Strona responsywna to strona zbudowana tak, żeby jej układ dopasowywał się do szerokości ekranu, na którym jest wyświetlana, zamiast istnieć w osobnych wersjach na komputer i telefon. Jedna strona, każda szerokość.
Czytaj hasłoStyle guide
Style guide to podstrona albo dokument referencyjny pokazujący, jak wyglądają i zachowują się elementy strony: nagłówki, tekst, przyciski, linki, pola formularzy, kolory i odstępy, każdy w każdym stanie.
Czytaj hasłoWireframe
Wireframe to uproszczony układ strony pokazujący, co gdzie stoi i w jakiej kolejności, bez kolorów, zdjęć i finalnych tekstów. Istnieje po to, by ustalić strukturę, zanim projekt graficzny uczyni zmiany strukturalne kosztownymi.
Czytaj hasło
Wdrożenie i CMS
9 pojęć
Client-First
Client-First to konwencja nazewnictwa i struktury dla projektów Webflow, opublikowana przez Finsweet. Określa, jak nazywać klasy, jak budować sekcje i jak obsługiwać odstępy, żeby każdy wykonawca, który ją zna, mógł czytać każdą stronę w niej zbudowaną.
Czytaj hasłoCMS
CMS, czyli system zarządzania treścią, to część strony, która pozwala dodawać i edytować treści bez ruszania kodu. Oddziela to, co jest powiedziane, od tego, jak jest pokazane.
Czytaj hasłoDesign handoff
Design handoff to moment, w którym gotowy projekt, zwykle plik Figma, przechodzi do osoby, która go wdroży. To, co przetrwa przekazanie, zależy od tego, jak wiele plik faktycznie rozstrzyga, a jak wiele zostawia do zgadywania.
Czytaj hasłoDesign tokens
Design tokens to nazwane wartości, z których zbudowany jest design system: kolor nazwany „surface-dark”, jednostka odstępu „space-md”, rozmiar tekstu „heading-2”. Elementy odwołują się do tokenu, nie do surowej wartości.
Czytaj hasłoHeadless CMS
Headless CMS przechowuje treść i pozwala nią zarządzać, ale nie ma własnego front-endu. Treść trafia przez API do tego, co ją wyświetla: strony, aplikacji, kiosku, wszystkie z jednego źródła.
Czytaj hasłoKomponent
Komponent to powtarzalny blok strony, jak karta, pasek nawigacji albo sekcja z wezwaniem do działania, zbudowany raz i umieszczany wielokrotnie. Zmiana komponentu zmienia wszystkie jego wystąpienia naraz.
Czytaj hasłoMigracja strony
Migracja strony to przeniesienie serwisu na inną platformę, domenę albo strukturę z zachowaniem tego, co ma wartość: treści, pozycji w wyszukiwarce i linków, które inne strony już do niego prowadzą.
Czytaj hasłoWebflow
Webflow to platforma do budowy stron łącząca wizualne narzędzie projektowe, CMS i hosting. Strony buduje się wizualnie, ale powstaje prawdziwy HTML, CSS i JavaScript, a po starcie mogą je edytować osoby bez umiejętności programowania.
Czytaj hasłoWebflow CMS
Webflow CMS to system treści wbudowany w Webflow. Treść organizuje się w kolekcje ze zdefiniowanymi polami, a strony kolekcji projektuje się raz jako szablony, przez które przepływa każdy element.
Czytaj hasło
Konwersja
10 pojęć
Bounce rate (współczynnik odrzuceń)
Bounce rate to odsetek wizyt, w których odwiedzający obejrzał jedną podstronę i wyszedł bez interakcji. Często traktuje się go jako miarę jakości strony, którą nie jest.
Czytaj hasłoCTA (call to action)
CTA, czyli wezwanie do działania, to element, który prosi odwiedzającego o zrobienie czegoś: umówienie rozmowy, wysłanie zapytania, pobranie przewodnika. To punkt, w którym czytanie zamienia się w decyzję.
Czytaj hasłoLanding page
Landing page to samodzielna podstrona zbudowana dla jednej grupy odbiorców przychodzącej z jednego źródła, zwykle reklamy albo kampanii, z jedną rzeczą do zrobienia. Istnieje po to, by kontynuować obietnicę, która sprowadziła odwiedzającego.
Czytaj hasłoLead
Lead to osoba albo firma, która okazała zainteresowanie w sposób, po którym można się odezwać: zapytanie, prośba, umówiona rozmowa. Komercyjnym zadaniem strony jest zwykle produkowanie leadów, do których warto się odezwać.
Czytaj hasłoLejek sprzedażowy
Lejek sprzedażowy to sekwencja kroków między wejściem odwiedzającego a jego konwersją, rysowana jako lejek, bo z każdym kolejnym krokiem dociera mniej osób. To model do znajdowania miejsca, w którym ludzie odpadają.
Czytaj hasłoMicrocopy
Microcopy to drobne teksty w interfejsie: etykiety przycisków, podpowiedzi w formularzach, komunikaty błędów, stany puste, linie potwierdzenia. To pisanie, którego nikt nie planuje, a każdy czyta.
Czytaj hasłoPropozycja wartości
Propozycja wartości to zdanie mówiące, co firma robi, dla kogo i dlaczego jest lepszym wyborem niż alternatywy. Na stronie zajmuje zwykle nagłówek sekcji hero i zdanie pod nim.
Czytaj hasłoSocial proof (społeczny dowód słuszności)
Social proof to dowód, że inni ludzie coś wybrali albo komuś zaufali: opinie, logotypy klientów, case studies, recenzje, liczba klientów. Odpowiada na pytanie, którego odwiedzający rzadko zadaje na głos: czy ktoś już to zrobił.
Czytaj hasłoStrona B2B
Strona B2B to strona firmowa, której odwiedzający kupują w imieniu organizacji, a nie dla siebie. To zmienia, co strona musi udowodnić, jak długo trwa decyzja i co w ogóle liczy się jako konwersja.
Czytaj hasłoWspółczynnik konwersji
Współczynnik konwersji to odsetek odwiedzających, którzy wykonali zdefiniowane działanie: na przykład wysłane formularze podzielone przez wizyty. To najczęściej cytowana metryka strony i najłatwiejsza do błędnego odczytania.
Czytaj hasło
SEO i wydajność
10 pojęć
Audyt strony internetowej
Audyt strony to uporządkowany przegląd serwisu względem jego celu: czy mówi właściwe rzeczy właściwym ludziom, czy dobrze działa i co powstrzymuje go przed przynoszeniem zapytań. Wynikiem jest lista zmian ułożona według priorytetu.
Czytaj hasłoCanonical (adres kanoniczny)
Canonical to adres, który podstrona deklaruje jako swoją oficjalną wersję, żeby wyszukiwarki traktowały duplikaty i warianty jako jedną stronę, a nie kilka konkurujących.
Czytaj hasłoCore Web Vitals
Core Web Vitals to trzy metryki, którymi Google opisuje, jak strona się ładuje i jak reaguje w odczuciu użytkownika: jak szybko pojawia się główna treść, jak szybko strona odpowiada na działanie i jak bardzo układ przesuwa się podczas ładowania.
Czytaj hasłoDane strukturalne (schema.org)
Dane strukturalne, znane też jako schema markup, to czytelne maszynowo informacje dodane do podstrony, opisujące, czym ona jest: artykułem, produktem, firmą, zestawem pytań. Pomagają wyszukiwarkom rozumieć treść i mogą włączyć bogatsze wyświetlanie wyników.
Czytaj hasłoHreflang
Hreflang to znacznik, który mówi wyszukiwarkom, którą wersję językową albo regionalną podstrony pokazać którym odbiorcom. Podstrona po angielsku i jej polski odpowiednik wskazują na siebie nawzajem, więc każda rankuje u właściwych szukających.
Czytaj hasłoLinkowanie wewnętrzne
Linkowanie wewnętrzne to sposób, w jaki podstrony serwisu linkują do siebie nawzajem. Mówi wyszukiwarkom, które podstrony są powiązane i które mają znaczenie, a odwiedzającym daje dokąd pójść dalej zamiast wyjścia.
Czytaj hasłoMeta description
Meta description to krótkie streszczenie podstrony w nagłówku HTML, często pokazywane pod tytułem w wynikach wyszukiwania. Nie wpływa bezpośrednio na pozycję, ale wpływa na to, czy ludzie klikają.
Czytaj hasłoPrzekierowanie 301
Przekierowanie 301 to trwałe odesłanie z jednego adresu na inny. Przeglądarka i wyszukiwarka podążają za nim automatycznie, a wyszukiwarki przenoszą pozycję starego adresu na nowy.
Czytaj hasłoRedesign strony internetowej
Redesign strony to przebudowa istniejącego serwisu zamiast tworzenia nowego: nowe pozycjonowanie, struktura albo projekt nałożone na stronę, która ma już treści, ruch i linki warte zachowania.
Czytaj hasłoTekst alternatywny (alt)
Tekst alternatywny, atrybut alt, to pisemny zamiennik obrazu, odczytywany przez czytniki ekranu i pokazywany, gdy obraz się nie załaduje. Opisuje, co obraz przekazuje, dla osoby, która go nie widzi.
Czytaj hasło