Dzisiaj mam dla Ciebie dwie strony, dzięki którym zrozumiesz 4 ważne zasady, które ulepszą wizualnie każdy projekt. To co za chwilę zobaczysz, nie jest normalnym przykładem, ale pokazuje sedno sprawy.
➡️ Zobacz tą “pieprzoną stronę”
Jak twierdzi autor na początek wejdź na tą “pieprzoną stronę”:
https://motherfuckingwebsite.com
Następnie wejdź na poprawioną wersję “pieprzonej strony”:
http://bettermotherfuckingwebsite.com
➡️ Czy wiesz co poprawiono?
Widzisz różnicę? Pomijam tutaj humorystyczny ton w jakim to wszystko jest utrzymane. Chodzi mi o układ, teksty, nagłówki. Jesteś w stanie samodzielnie powiedzieć co się zmieniło? Nie czytając poprawionej wersji, spróbuj wychwycić 4 rzeczy, które zostały poprawione względem pierwszej strony.
➡️ I jak? Pomogę Ci trochę:
Odległości akapitów
Odległości interlinii w pierwszym przypadku były zbyt małe, przez co tekst nachodził na siebie, brak mu oddechu. Nie wzoruj się na wartościach domyślnych interlinii, wybierz minimum line-height: 1.4 dla kopii treści. Nagłówki powinny posiadać nieco mniejszą interlinie niż tekst.
Mniejszy kontrast
Czarny tekst na białym tle, często będzie posiadał zbyt silny kontrast, męczący oczy. Dlatego warto użyć trochę szarości w tekście, zamiast wybierać czystą czerń #000000 lub zamiast białego tła, wybrać lekką szarość.
Tekst na całą szerokość
Bloki tekstowe pisane na całą szerokość strony, to zdecydowanie zły pomysł. Staraj się utrzymać 60-80 znaków w jednej linii, dzięki czemu poprowadzisz wzrok użytkownika do następnego akapitu.
Zbyt mały tekst
Nie każ użytkownikowi nadwyrężać oczu. Tekst musi być dobrze widoczny. Dzisiejszy standard to 16px dla kopii tekstowej. Tak naprawdę zamiast px lepiej jest posługiwać się rozmiarami fontu, czyli wartościami procentów lub em, które skalują się w zależności od rozmiaru ekranu i poziomu powiększenia.
