Sześć zasad projektowania stron (hierarchia, odstępy, kontrast, wyrównanie, bliskość, cele dotykowe), każda pokazana jako demo na żywo przed i po, które możesz przełączać, z kodem CSS stojącym za poprawką.
Dobry web design wynika głównie z sześciu nawyków: uporządkuj treść czytelną hierarchią wizualną, zostaw wystarczająco dużo wolnej przestrzeni, utrzymuj kontrast tekstu na poziomie 4.5:1 lub lepszym, wyrównuj elementy do wspólnych krawędzi, grupuj powiązane elementy blisko siebie i rób cele dotykowe o wymiarach co najmniej 24 na 24 piksele. Przełączaj każde demo poniżej między przed i po, aby zobaczyć różnicę.
Sześć zasad i CSS, który zwykle je naprawia
Artykuły o zasadach projektowania opisują je słowami i zdjęciami stockowymi. Tutaj każda zasada to mała karta produktu lub formularz narysowany dwa razy, w wersji zepsutej i poprawionej, więc możesz przełączać się między nimi i zobaczyć dokładnie, co się zmieniło.
Na co dzień najważniejsze są hierarchia, wolna przestrzeń, kontrast, wyrównanie, bliskość i wygodne cele dotykowe. Łączy je spójność: te same odstępy, rozmiary tekstu i kolory powtarzane na każdej stronie.
Hierarchia wizualna to kolejność, w jakiej ludzie zauważają elementy na stronie. Projektanci sterują nią za pomocą rozmiaru, grubości, koloru, położenia i przestrzeni, tak aby nagłówek był widoczny pierwszy, szczegóły uzupełniające drugie, a główne działanie łatwe do znalezienia.
Kryterium sukcesu 1.4.3 WCAG 2.2, poziom AA, wymaga co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu, który definiuje jako co najmniej 18 punktów lub 14 punktów pogrubionych.
Opisuje, jak ludzie często skanują strony z dużą ilością tekstu: w poprzek u góry, jeszcze raz w poprzek nieco niżej, a potem w dół po lewej stronie. Praktyczny wniosek: umieszczaj kluczowe słowa na początku nagłówków i wierszy i nie zakopuj ważnych informacji w środku akapitu.
Kryterium 2.5.8 WCAG 2.2 na poziomie AA ustala minimum 24 na 24 piksele CSS dla celów wskaźnika, z pewnymi wyjątkami, takimi jak linki wewnątrz zdania. Wiele zespołów projektowych stosuje większe główne przyciski, aby łatwo było w nie trafić.
Trzy stopnie tekstu porządkują treść, odstępy pochodzą ze skali 8px, a przygaszony tekst pozostaje na tyle ciemny, by spełnić 4.5:1 na białym tle.
Tytuł, cena i przycisk mają ten sam rozmiar i grubość, więc wzrok nie ma się na czym zatrzymać.
Rozmiar, grubość i kolor porządkują treść: najpierw tytuł, potem cena, na końcu działanie.
Wszystko jest upchnięte od krawędzi do krawędzi, co wygląda na zagracone i trudne do przejrzenia.
Hojny padding i odstępy oddzielają grupy i dają każdemu elementowi miejsce.
Jasnoszary tekst na białym tle jest znacznie poniżej minimum WCAG dla zwykłego tekstu.
Ciemny tekst na białym tle przekracza 4.5:1, minimum WCAG 2.2 poziomu AA dla tekstu o zwykłym rozmiarze.
Mieszanka linii wyśrodkowanych i wyrównanych do lewej tworzy poszarpane krawędzie, za którymi musi gonić wzrok.
Jedna wspólna lewa krawędź zamienia oddzielne linie w jeden czytelny blok.
Etykiety są tak samo daleko od każdego pola, więc nie wiadomo, która etykieta do czego należy.
Każda etykieta przylega do swojego pola, a pary są od siebie oddalone, więc grupowanie jest oczywiste.
Malutkie linki tłoczą się obok siebie i łatwo w nie nie trafić palcem.
Cele mają co najmniej 24 na 24 piksele CSS, minimum WCAG 2.2 poziomu AA, z odstępem między nimi.
Zasada
Wersja
Przed
Po
Przed: {text}
Po: {text}
Chleb na zakwasie
$9, pieczony codziennie
Zamów teraz
Godziny otwarcia
Pon. do pt., 7am do 6pm
Sob., 8am do 2pm
Dowozimy w promieniu 5 km od sklepu, codziennie rano przed 9.
Kolor tekstu {hex} na białym tle
Catering
Półmiski dla 10 do 100 osób.
Zamów z dwudniowym wyprzedzeniem.
Imię i nazwisko
Telefon
Menu
Godziny
Zamów
Zacznij za darmo · Bez karty kredytowej