Najlepsze praktyki i wskazówki dotyczące responsywnego projektowania stron internetowych

Ponieważ Google nadal priorytetowo traktuje witryny przyjazne dla urządzeń mobilnych, posiadanie responsywnej witryny dla Twojej firmy staje się coraz ważniejsze. Gdy Twoja witryna jest responsywna, będzie wyglądać świetnie na wszystkich urządzeniach (mobilnych, tabletach, komputerach itp.)

Chociaż przeróbka istniejącej witryny może wydawać się zniechęcająca, responsywne projektowanie witryny nie musi być trudne. Poniżej znajduje się kilka przydatnych wskazówek i najlepszych praktyk, które pomogą Ci łatwo i bezproblemowo stworzyć świetny, użyteczny produkt internetowy.

Zdefiniuj swój styl

Tworzenie palety kolorów

Niezależnie od tego, czy pracujesz z predefiniowaną paletą kolorów marki, czy tworzysz własną, pamiętaj, aby uwzględnić wystarczająco dużo kontrastujących kolorów, aby można było ustalić dobrze zdefiniowaną hierarchię wizualną. Dodanie różnych odcieni neutralnych kolorów zapewni dużą elastyczność w projektach.

Najpierw myśl mobilnie

Najpierw zastanów się, jak Twoje elementy internetowe będą wyglądać na małych urządzeniach mobilnych, a następnie zastosuj je do większych rozmiarów widocznych obszarów. Na przykład, czy Twoje przyciski są wystarczająco duże, aby można je było nacisnąć palcem, i czy są wystarczająco oddalone od innych klikalnych elementów?

Stwórz swój przewodnik stylu po wstępnych układach, a nie wcześniej

Niektórzy ludzie lubią tworzyć przewodnik po stylu i definiować style elementów internetowych przed rozpoczęciem prototypu lub makiety o wysokiej wierności. Jednak po umieszczeniu elementów na stronie i oglądaniu ich względem siebie ogólny wygląd strony może zostać utracony. Utwórz kilka makiet na początek, ustal swoje style, a następnie skomponuj pozostałe strony, jeśli to konieczne.

Konsekwentny nie musi oznaczać nudy

Heurystyka użyteczności jest ważna, ale wyróżnia się spośród miliardów innych witryn internetowych. Nie bój się spróbować czegoś innego, aby być bardziej zapadającym w pamięć i wyróżnić markę swojej witryny z tłumu. Twoja strona internetowa może być kreatywna, a także bardzo użyteczna. Świetny projektant interfejsu użytkownika lub dyrektor ds. sztuki cyfrowej powinien być w stanie zrównoważyć te dwa elementy.

Niektóre elementy, które możesz chcieć stylizować i standaryzować, to:

• Poziomy nagłówka: H1, H2, H3…
• Zdjęcia główne lub bohaterów
• Podstawowa nawigacja
• Nawigacja dodatkowa
• Kopia ciała
• Listy numerowane i punktowane
• Wezwania lub odznaki
• Obróbka obrazów treści
• Styl cytatu
• Widgety (rotatory, embedy społecznościowe, kalendarze itp.)
• Duże przyciski wezwania do działania
• Dodatkowe przyciski lub linki tekstowe
• Elementy formularza
• Przypisy i legalna myszka
• Udostępnianie społecznościowe

Rodzaj

Kopiuj bloki

Baw się odstępami między literami (śledzenie), marginesami i odstępami między wierszami (liniami), aby na nowo zdefiniować swoją hierarchię. Im węższe odstępy, tym cięższy i bardziej klaustrofobiczny tekst będzie się pojawiał.

Pamiętaj, że długie bloki tekstu biegnące od lewej do prawej strony ekranu pulpitu mogą być bardzo trudne dla oka. Jeśli to możliwe, użyj węższego bloku do kopiowania. Jednak zbyt duże odstępy mogą powodować suche, rozproszone uczucie.

Nie bój się go rozbić

Jeśli masz stronę internetową, która jest bardzo zajęta, podziel ją trochę za pomocą cytatów, objaśnień, obrazów, stylizowanych list, tabel itp. Możesz również włączyć akordeony, listy rozwijane i karuzele, aby strona była interesująca i pouczająca .

Tak, ludzie przewijają w dół

Nie wpadaj w staromodną pułapkę polegającą na tym, że wszystko na Twojej stronie musi znajdować się nad cyfrową krawędzią strony. Utrzymuj najważniejszą lub najbardziej atrakcyjną treść u góry strony, aby poprowadzić użytkownika dalej w dół. Może to być kreatywny, ale opisowy nagłówek, przekonujące zdanie wprowadzające lub mocny obraz.

ZWIĄZANE Z

Wiodące trendy w projektowaniu 2020

Rozmiar w górę Typ

Ogólnie rzecz biorąc, w przypadku responsywnej witryny trzymaj się czcionki o rozmiarze 14-18 pikseli. Ogólnie rzecz biorąc, używaj prostych czcionek bezszeryfowych lub szeryfowych dla tych większych bloków kopii i trzymaj je na jasnym tle z umiarkowanie kontrastującym kolorem czcionki. Główny nagłówek może być większy, ale pamiętaj, że po napotkaniu punktu przerwania o rozmiarze mobilnym może być potrzebny nieco mniejszy styl.

Wpisz kolor

Sztuczka z kolorem pisma polega na tym, że tekst powinien mieć wystarczający kontrast z tła, aby można go było łatwo zobaczyć, ale wielu projektantów nie wie, że czasami czcionka może mieć zbyt duży kontrast i jest nieprzyjemna dla oka, przez co wydaje się wibrować podczas oglądania. Staraj się używać jaśniejszej czcionki na ciemniejszym tle oszczędnie i tylko w przypadku mniejszych bloków tekstu.

Typ Waga

Cięższe style czcionek mogą być trudne do odczytania w mniejszych rozmiarach, a przy większych rozmiarach strona może wydawać się ciemna i ciężka. Cienkie i jasne style czcionek wyglądają świetnie na ekranach siatkówkowych i siatkówkowych, ale mogą wyglądać słabo na wielu ekranach o standardowej rozdzielczości.

Nawigacja

Hamburgery!

Navicon to ikona, która również wygląda jak mała kanapka lub hamburger z trzema liniami do układania w stos. Jeśli uważasz, że ogólna grupa demograficzna użytkowników nie jest zbyt obeznana z technologiami internetowymi – zawsze umieszczaj słowo „menu” nad lub obok Navicon . Dotychczasowe badania użytkowników pokazują, że użytkownik jest bardziej skłonny do przeglądania Twojej witryny, jeśli użyje słowa Menu lub Nawiguj obok lub nad Navicon.

Dołącz przycisk „Powrót do góry” na dole długiej przewijanej strony

Badania mówią nam, że wielu użytkowników urządzeń mobilnych nie wie, jak łatwo przejść na górę strony internetowej w przeglądarce mobilnej. Aby rozwiązać ten problem, umieść przycisk „powrót do góry” u dołu strony. Umożliwi to użytkownikowi łatwy dostęp do nawigacji w witrynie, jeśli nie jest ona odzwierciedlona w stopce.

Inną opcją jest utworzenie lepkiej nawigacji. Jest to górny pasek nawigacyjny witryny, który zawsze przykleja się do górnej części ekranu, bez względu na to, jak daleko przewijasz stronę. Jeśli zdecydujesz się pójść tą drogą, upewnij się, że lepka nawigacja nie ma więcej niż 100 pikseli wysokości, w przeciwnym razie może zabraknąć miejsca na zawartość strony w mniejszych rozmiarach widocznych obszarów.

Słowniczek projektowania:

Zawołać
krótki fragment tekstu osadzony w mocniejszym potraktowaniu niż reszta strony i mający na celu przyciągnięcie uwagi.

Kopiuj blok
zgrupowany akapit lub serię akapitów tekstu.

Składanie (cyfrowe)
używane w projektowaniu stron internetowych (wraz z „ nad przewijaniem”), aby odnosić się do części strony, która jest widoczna bez przewijania. Ponieważ rozmiary ekranu różnią się drastycznie, nie ma ustalonej definicji liczby pikseli, które definiują zagięcie .

Szeryf
niewielka projekcja kończąca kreskę litery w niektórych krojach pisma.

Bezszeryfowy
krój pisma sans – serif , sans serif , gothic, san serif lub po prostu sans to taki, który nie ma małych wystających elementów zwanych „ szeryfami ” na końcu pociągnięć. Termin pochodzi od francuskiego słowa sans oznaczającego „bez”, a „ szeryfowy ” z holenderskiego słowa schreef oznaczającego „linię”.

Typ (typograficzny) Waga
względna ciemność znaków czcionki wynikająca z względnej grubości kresek, wyrażona jako jasna, pogrubiona, ekstra pogrubiona itp.

Użytkownik
osoba, która czegoś używa lub obsługuje, w szczególności komputer, urządzenie lub inne maszyny.

Widoczność
obramowany obszar na ekranie wyświetlacza do przeglądania informacji.

Biała przestrzeń
w układzie strony, ilustracji i rzeźbie, biała przestrzeń jest często określana jako przestrzeń negatywna. Jest to część strony, która nie została oznaczona: marginesy, rynny i odstępy między kolumnami, wierszami tekstu, grafiką, rysunkami lub obiektami narysowanymi lub przedstawionymi.