Typowe błędy w projektowaniu stron internetowych
Prosty układ i wskazówki projektowe, które pomogą Ci stworzyć oszałamiającą stronę internetową
Tysiące ludzi na całym świecie tworzy strony internetowe na platformie Tilda. Ten artykuł jest oparty na ostatnich badaniach przeprowadzonych przez moich kolegów i mnie. Przeanalizowaliśmy typowe błędy, które ludzie popełniają podczas tworzenia stron internetowych za pomocą naszej platformy. Oto lista dos i don't mających zastosowanie do każdego narzędzia do projektowania stron internetowych lub usługi, z której korzystasz.
Typowe błędy w projektowaniu stron docelowych, których należy unikać
1. Treść nie jest podzielona na logiczne bloki
Użytkownicy łatwiej przyswajają informacje, jeśli są one pogrupowane w logiczne bloki. Ustaw padding na 120 px-180 px i oddziel bloki tekstu za pomocą kolorowego tła.
Pomiędzy zestawami powiązanych ze sobą informacji nie ma zbyt wiele miejsca, a ponadto projekt ten wymaga kolorowych bloków, aby podzielić zawartość na logiczne zestawy. W rezultacie informacje te są trudne do przyswojenia i nie jest jasne, który tekst powinien pasować do każdego bloku
Odstępy są wystarczająco duże, a bloki są oddzielone kolorem, co natychmiast wyjaśnia jedną rzecz - te bloki zawierają różne typy treści
2. Nierówne odstępy między elementami na stronie internetowej
Wokół bloków logicznych powinny znajdować się odstępy tej samej wielkości. W przeciwnym razie strona będzie wyglądać niechlujnie, a użytkownicy mogą nie zwracać równej uwagi na każdą sekcję.
Odstępy o różnej szerokości wyglądają nierównomiernie i tworzą wrażenie, że informacje o firmie są powiązane z nagłówkiem, mimo że każdy blok jest równie ważny.
Odstępy tej samej wielkości wokół nagłówków i treści pomagają postrzegać bloki logiczne jako zawierające równie ważne informacje.
3. Zbyt małe wypełnienie oznacza, że użytkownicy nie mogą podzielić treści na logiczne bloki.
Aby części logiczne nie zlewały się ze sobą, należy je oddzielić i wstawić między nimi duży odstęp (co najmniej 120 pikseli).
Użyj wąskiego paddingu, a bloki, które tworzą stronę, przylegają do siebie. Powoduje to przeładowanie strony i jest dość mylące - odwiedzający witrynę jest przekonany, że jest to jeden jednolity tekst, a nie części o różnym znaczeniu
Padding jest wystarczająco duży, aby różnica między tymi dwoma blokami była natychmiast widoczna
4. Unikaj niskiego kontrastu tekstu na obrazie.
Powinien istnieć wystarczający kontrast między tekstem a tłem. Aby wyróżnić kopię, umieść kontrastujący filtr na obrazie. Popularnym kolorem jest czarny, ale można również użyć jasnych kolorów i łączyć je ze sobą.
Inną opcją jest użycie kontrastującego obrazu od samego początku i umieszczenie tekstu na ciemnym fragmencie zdjęcia.
Inną opcją jest użycie kontrastującego obrazu od samego początku i umieszczenie tekstu na ciemnym fragmencie zdjęcia.
Ten obraz jest zbyt jasny, przez co czytanie tekstu jest zbyt trudne
Filtr zastosowany do zdjęcia sprawia, że kopia jest łatwa do odczytania
5. Zbyt wiele stylów na jednej stronie
Zbyt wiele stylów typograficznych i projektowych na jednej stronie sprawia, że wygląda ona nieprofesjonalnie i jest trudna do odczytania. Aby tego uniknąć, ogranicz się do jednej czcionki i dwóch opcji nasycenia, na przykład normalnego i pogrubionego.
Z powodu użycia zbyt wielu stylów typograficznych, nie jest jasne, gdzie leży nacisk
Jedna czcionka, jeden kolor i dwa rodzaje nasycenia. Typografia na stronie wygląda schludnie i przejrzyście
6. Blok kolorów jest zbyt wąski
Unikaj podkreślania wąskich elementów strony kolorem. To po prostu nie wygląda dobrze. Na przykład nagłówki są już dobrze zaznaczone dzięki swojemu rozmiarowi, nasyceniu czcionki i odstępom. Chcesz podkreślić konkretny punkt na stronie? Użyj kolorowego tła dla całego bloku, w tym powiązanego nagłówka i tekstu.
Nagłówki umieszczone na kolorowym tle przerywają ciągłość strony i wyglądają jak oddzielne, niezależne elementy.
Zarówno nagłówek, jak i powiązany tekst mają to samo tło. Pokazuje to, że należą do tego samego zestawu logicznego
7. Za dużo tekstu w wąskich kolumnach
Gdy w wąskich kolumnach znajduje się dużo tekstu, trudno jest go czytać, ponieważ odwiedzający witrynę muszą przeskakiwać z jednego wiersza do drugiego. Dodatkowo, nie wygląda to dobrze! Najlepiej jest zmniejszyć liczbę kolumn i skrócić tekst, w przeciwnym razie nikt go nie przeczyta.
Długie, stożkowe kolumny są trudne do odczytania
W tych kolumnach jest niewiele tekstu, więc ich czytanie jest łatwe
8. Zbyt dużo wyśrodkowanego tekstu
Wyśrodkowanie tekstu na stronie działa dobrze, gdy jest go mało, w przeciwnym razie użytkownikom trudno jest sprawnie się po niej poruszać. Jednocześnie należy zwiększyć rozmiar czcionki, zaczynając od 24 pikseli.
Jeśli chcesz zamieścić dużo tekstu, użyj bloków ze zwijaną kopią tekstu (w Tildzie są to bloki TX12, TX16N lub przycisk BF703).
Jeśli chcesz zamieścić dużo tekstu, użyj bloków ze zwijaną kopią tekstu (w Tildzie są to bloki TX12, TX16N lub przycisk BF703).
Długie, wyśrodkowane teksty nie są łatwe do czytania
Krótki tekst pod nagłówkiem (oba wyśrodkowane) wygląda dobrze na stronie.
9. Tekst jest nałożony na istotną część obrazu.
Unikaj zakrywania znaczących części lub drobnych szczegółów obrazu tekstem. W ten sposób zarówno zaciemnisz obraz, jak i sprawisz, że tekst będzie nieczytelny. Wypróbuj różne pozycje linii, takie jak ich wyśrodkowanie, wyrównanie tekstu do lewej lub umieszczenie ich pionowo.
Ten nagłówek przeszkadza kobiecej twarzy. Przy tak wielu drobnych szczegółach trudno jest przeczytać tekst
Obraz i tekst są czytelne i tworzą dobrą kompozycję
10. Nadużywanie hierarchii wizualnej
Aby hierarchia informacji była dobrze widoczna na stronie, tytuł na okładce powinien być większy niż reszta nagłówków lub przynajmniej tej samej wielkości, zwłaszcza jeśli nagłówek jest długi.
Nagłówek w nagłówku jest nieproporcjonalnie mniejszy od następnego nagłówka, co jest mylące. Dlaczego? Sprawia to, że drugi nagłówek wydaje się bardziej widoczny
Nagłówek w nagłówku jest większy niż w następnym bloku, dzięki czemu cała strona wygląda spójnie
Ta sama zasada dotyczy hierarchii wizualnej w obrębie bloku logicznego. Nagłówek powinien być największym elementem projektu na stronie, po którym następuje mniejszy, mniej widoczny podtytuł. Kolejne tytuły funkcji powinny być zauważalnie mniejsze niż nagłówek i mieć tę samą wagę. Najmniejsze czcionki powinny być używane do opisów funkcji.
Pomoże to odwiedzającym witrynę odróżnić najważniejsze i mniej ważne informacje.
Pomoże to odwiedzającym witrynę odróżnić najważniejsze i mniej ważne informacje.
Nagłówek jest mniejszy niż tytuły funkcji i wydaje się drugorzędny, choć w tym kontekście jest ważniejszy
Nagłówek jest najbardziej widocznym elementem na stronie i chociaż tytuły funkcji są pisane mniejszą czcionką, nadal są wyraźnie widoczne
11. Jeden zestaw logiczny jest podzielony na dwa
Pełnoekranowy obraz lub galeria, podążająca za tekstem, przypomina oddzielny, niezależny blok. Jeśli dodasz padding wokół galerii, zarówno kopia tekstu, jak i obrazy będą wyglądać jak logiczna całość dzięki wspólnemu tłu.
Galeria pełnoekranowa wygląda na oderwaną od nagłówka powyżej i wygląda jak samodzielny blok
Galeria ma to samo tło, co nagłówek tuż nad nią, co sprawia, że cała kompozycja wygląda solidnie
12. Tytuł jest zbyt duży i długi
Bardzo duża czcionka jest idealna dla krótkich zdań. Jeśli nagłówek jest długi, użyj mniejszej czcionki. Będzie łatwy do odczytania i pozostawi dużo miejsca na wszystkie inne elementy projektu na stronie.
Nagłówek, który jest zbyt duży, zajmuje całą okładkę, podczas gdy elementy projektu przepychają się o przestrzeń, a nagłówek jest trudny do odczytania
Ta strona jest dobrze skomponowana, wszystkie elementy projektu są ze sobą w równowadze, a tekst jest łatwy do odczytania
13. Nieprawidłowe użycie stylu obramowania dla przycisków
Obramowanie jest konieczne, gdy przycisk jest przezroczysty. Dodawanie obramowania dla kolorowego przycisku nie ma sensu, to tylko kolejny bezsensowny element projektu, który przeciąża stronę i utrudnia jej czytanie.
14. Używanie zbyt wielu kolorów
Używanie zbyt wielu kolorów na stronie jest mylące i nie jest jasne, które elementy są ważniejsze. Jeden lub dwa kolory wystarczą, aby wizualnie wyeksponować to, co naprawdę ważne.
Na stronie jest zbyt wiele jasnych kolorów, co jest mylące.
Jeden akcent kolorystyczny tworzy różnorodność i nie odwraca uwagi od zawartości strony.
15. Przeciążone menu
Ludzie odwiedzają strony internetowe, aby znaleźć rozwiązania swoich problemów. Pomóż im! Użyj menu, aby pomóc ludziom poruszać się po stronie i znaleźć to, czego potrzebują szybko i łatwo. Nie przeciążaj ich nadmiarem informacji. Wystarczy 5-7 pozycji w menu.
To menu zawiera zbyt wiele informacji, utrudniając nawigację po witrynie.
Proste menu ułatwia znalezienie tego, czego potrzebujesz
Błędy w projektowaniu artykułów
1. Długa, solidna kopia
Ściana tekstu utrudnia czytanie ze zrozumieniem. Aby ułatwić nawigację, podziel go na akapity lub wprowadź przerwy, takie jak fraza kluczowa lub obraz.
Trudno jest patrzeć na ścianę tekstu
Elementy takie jak cytaty lub obrazy ułatwiają czytanie tekstów.
2. Nagłówek jest umieszczony w tej samej odległości między poprzednim i następnym akapitem.
Nagłówek nie powinien "wisieć" między rozdziałami w podobnej odległości, ponieważ należy do akapitu, który po nim następuje. Odległość nad nagłówkiem powinna być 2-3 razy większa niż przestrzeń pod nim. Jednocześnie odległość pod nagłówkiem powinna być mniej więcej taka sama jak przestrzeń między akapitami lub nieco większa. W ten sposób nagłówek będzie wizualnie odnosił się do następującego po nim tekstu.
Nagłówek jest umieszczony w równej odległości między akapitami powyżej i poniżej i nie jest jasne, do którego akapitu należy
Dzięki zastosowaniu wypełnienia pod nagłówkiem jest oczywiste, że nagłówek należy do tekstu, który po nim następuje
3. Nie ma logicznego porządku
W typografii kontrast służy do wizualnego podziału różnych poziomów tekstu i ustanowienia ścisłej hierarchii. Główne nagłówki powinny być najbardziej widoczne na stronie, podtytuły powinny być znacznie mniejsze, ale nadal wyraźnie widoczne.
Nagłówek i podtytuł mają w przybliżeniu ten sam rozmiar i nie ma między nimi wyraźnej hierarchii.
Logicznie rzecz biorąc, nagłówek jest ważniejszy niż podtytuł
4. Różne wypełnienie powyżej i poniżej bloków
Jeśli bloki mają taką samą wagę, powinny mieć taki sam wygląd i być umieszczone w równej odległości od siebie.
Jeśli odstęp między nagłówkiem a obrazem autora jest zbyt wąski, wygląda to tak, jakby autor miał więcej wspólnego z nagłówkiem niż z tekstem, który po nim następuje
Dzięki identycznemu rozmiarowi wypełnienia nad i pod obrazem, bloki wyglądają na równe
5. Napis znajduje się zbyt blisko obrazu
Z jednej strony ilustracja i jej podpis tworzą całość, ale są to dwa oddzielne elementy, a podpisy nie powinny kolidować z obrazami.
Napis przykleja się do obrazu i mamy problem z odpowiednim zaangażowaniem się w którykolwiek z nich
Pomiędzy obrazem a podpisem jest dużo białej przestrzeni, ale jest jasne, że podpis pasuje do obrazu
6. Zbyt mało miejsca między podtytułem a tekstem.
Podtytuł i tekst, który po nim następuje, należą do siebie, ale jeśli odstęp między akapitami w artykule jest większy niż odstęp między podtytułem a następnym akapitem, artykuł wygląda na chaotyczny.
Odstęp między nagłówkiem a akapitem jest mniejszy niż między samymi akapitami.
Odstęp po nagłówku jest nieco większy niż odstęp między akapitami.
7. Wyróżniające się elementy są umieszczone zbyt blisko tekstu głównego
Elementy używane jako podkreślenia, takie jak kluczowe frazy lub cytaty, są niezależnymi obiektami. Aby naprawdę się wyróżniały, ustaw je w odległości 75-120 pikseli od głównej treści.
Między tekstem głównym a wyróżniającymi się elementami jest zbyt mało miejsca.
Pociągający cytat naprawdę wyróżnia się dzięki dużemu wypełnieniu
8. Elementy o niskim kontraście
Jeśli chcesz podkreślić jakąś frazę, pogrubić ją, spraw, by fraza kluczowa była większa od głównego tekstu o 10-15 px. Niech kluczowa fraza naprawdę wyróżnia się na tle reszty tekstu.
Fraza kluczowa zlewa się z resztą tekstu. Wygląda to niechlujnie, więc staraj się tego unikać
Teraz każdy może go zobaczyć dzięki dużej czcionce i wystarczającemu wypełnieniu wokół tekstu
9. Kolorowe tło dla wąskiego bloku tekstowego
Jeśli chcesz wyróżnić małą sekcję strony, taką jak informacje o autorze, wystarczy ustawić wokół niej wystarczającą ilość wypełnienia, co stworzy wrażenie przestrzeni. Nie umieszczaj tej sekcji na kolorowym tle; będzie to wyglądać nie na miejscu.
Nie używaj koloru w podtytule. Użycie większej czcionki i wypełnienia powinno wystarczyć, aby wyróżnić go na stronie.
10. Pomiędzy dwoma obrazami pełnoekranowymi jest puste miejsce
Jeśli używasz kilku pełnoekranowych obrazów w sekwencji, unikaj pozostawiania między nimi odstępu. Obramowanie będzie nadal widoczne i nie ma potrzeby dodawania dodatkowego elementu. To po prostu niczego nie dodaje.
Pusta przestrzeń między obrazami pełnoekranowymi nie ma sensu i nie wygląda dobrze.
W tym przykładzie występuje harmonijny przepływ między obrazami
11. Użyto zbyt wielu akcentów stylistycznych
Akcenty projektowe (takie jak pogrubienie tutaj) działają dobrze, gdy jest ich niewiele. Zbyt duża ich liczba będzie przeszkadzać w czytaniu strony.
Wiele słów jest zaznaczonych pogrubioną czcionką, więc kopia tekstu wygląda na uszkodzoną
Kilka zaznaczonych słów zwraca na siebie uwagę i nie koliduje z resztą tekstu
12. Zbyt wiele stylów typografii
Projekt nie powinien zakłócać czytelności. Im mniej stylów typograficznych, tym lepiej widoczne są ważne elementy. Wystarczy podkreślić nagłówki i podtytuły oraz użyć kontrastu dla kluczowych fraz.
Tekst zawiera zbyt wiele elementów typograficznych. Rozpraszają one czytelnika
Bardzo mało stylów typograficznych, wyraźne podkreślenia i przestrzeganie hierarchii tekstu.
13. Wyśrodkowanie tekstu w długim artykule
Wyśrodkowanie jest zwykle stosowane do nagłówków i cytatów blokowych, aby odróżnić je od reszty tekstu. Wyśrodkowany długi tekst jest trudny do odczytania.
Wyśrodkowany tekst wygląda niechlujnie i jest trudny do odczytania
Tekst wyrównany do lewej jest przyjemny dla oka
14. Nagłówek pojawia się zbyt blisko obrazu
Nagłówek jest indywidualnym elementem projektu. Nie powinien znajdować się zbyt blisko następującego po nim obrazu. Aby uzyskać zwycięską kombinację, ustaw padding na nie mniej niż 60 px i dodaj podtytuł - rozwinie to zawartość strony i położy odpowiedni nacisk tam, gdzie jest to potrzebne.
Nagłówek znajduje się zbyt blisko obrazu, na tej stronie nie ma miejsca na oddech.
Tutaj nagłówek jest oddzielony od obrazu podtytułem i odnosi się do całej sekcji, a nie tylko do obrazu
15. Używanie kursywy, gdy nie jest potrzebna
Kursywa służy do wyróżnienia słowa lub krótkiej frazy w tekście. Nie jest tak natychmiast zauważalna jak pogrubienie, ale pozwala na podkreślenie tam, gdzie jest to potrzebne.
Nie pisz wszystkiego kursywą (treść, nagłówki). A jeśli w tekście używane są czcionki bezszeryfowe, należy całkowicie unikać kursywy.
Nie pisz wszystkiego kursywą (treść, nagłówki). A jeśli w tekście używane są czcionki bezszeryfowe, należy całkowicie unikać kursywy.
Fraza wyróżnia się już dzięki rozmiarowi czcionki i wypełnieniu, więc kursywa nie jest tutaj naprawdę potrzebna
Kursywa jest we właściwym miejscu, dodając odpowiednią ilość podkreślenia
16. Bloki wydają się nie na swoim miejscu względem środka strony i siebie nawzajem.
Możesz łatwo zauważyć ten błąd, jeśli zrobisz sobie małą przerwę po edycji strony (zmiana rozmiaru czcionki, wyrównania lub wcięcia) i spojrzysz na to, co się na niej znajduje.
W tym przykładzie nagłówek jest przesunięty w lewo, a kopia tekstu w prawo
Wszystkie elementy tekstu są ze sobą zharmonizowane.
Autorzy: Ira Smirnova, Masha Belaya, Julia Zass
Projekt i układ: Julia Zass
Czy ten artykuł okazał się przydatny? Jeśli tak, podziel się nim ze znajomymi. Wielkie dzięki!
