10 przykazań dotyczących projektowania stron internetowych dla każdego projektu

Czy masz instrukcję dotyczącą projektowania stron internetowych? Istnieją pewne zasady, które dotyczą praktycznie każdego projektu internetowego - nazwijmy je „przykazaniami dotyczącymi projektowania stron internetowych”.

Bez względu na to, jak duża lub mała jest strona internetowa, zasady te stanowią podstawę dobrego projektu. Jeśli zastosujesz się do tych podstawowych wskazówek i sprawisz, że będą się zastanawiać nad każdym rozpoczętym projektem, unikniesz wielu pułapek, w które wpadną projektanci!

1. Będziesz konsekwentny

Uprość projekt, aby użytkownicy mogli z niego korzystać

Konsekwentna konstrukcja jest łatwa w użyciu i zrozumiała. Zaangażowanie i działania użytkowników, a także elementy wizualne, powinny mieć podobny wygląd i zastosowanie w jednym projekcie.

Oznacza to, że przyciski mają ten sam kolor i używają tych samych stanów najechania kursorem, aby pomóc użytkownikom wiedzieć, jak wchodzić w interakcje, nagłówki mają ten sam rozmiar i używają tego samego kroju pisma w całym projekcie, a elementy takie jak kolory są zgodne z paletą, która jest możliwa do zidentyfikowania i powiązana z Marka.

Inne elementy wizualne również powinny być zgodne ze spójnym stylem, a także ze stylem i planem użytkowania takich elementów, jak ikony lub fotografia, wideo lub ilustracje. Projekt powinien mieć głos używany do kopiowania bloków pasujących do ogólnej estetyki.

Wszystkie te elementy spójności przyczyniają się do ogólnej użyteczności, czyniąc projekt tak łatwym, jak to możliwe dla użytkowników.

2. Będziesz używać białych znaków

Dodatkowa przestrzeń wokół elementów może pomóc w tworzeniu separacji i ułatwić ich odczytanie.

Nie ma potrzeby wrzucania każdego elementu w przestrzeń nad zwojem. Użyj białych znaków, aby ustalić rytm i przepływ, stworzyć wizualną hierarchię i pomóc użytkownikom poruszać się po projekcie.

Jeśli zawartość jest dobra, będą się przewijać.

A białe spacje mogą faktycznie zachęcić użytkownika do działania, przyciągając wzrok w dół ekranu.

Białe znaki są jeszcze ważniejsze, ponieważ rozmiary ekranów stają się coraz mniejsze. Dodatkowa przestrzeń wokół elementów może pomóc w tworzeniu separacji i ułatwić ich odczytanie. (Pomyśl o tym, jak korzystne może być trochę dodatkowego miejsca, jeśli chodzi o łatwe stukanie przycisków).

Nie wiesz, gdzie umieścić w projekcie białe znaki? Zacznij tutaj:

• Wokół przycisków lub innych interaktywnych elementów
• Jako odstęp między wierszami typu, aby ułatwić czytanie
• Pomiędzy elementami, dzięki czemu można rozróżnić tingi, na przykład zawijanie zdjęć osadzonych w blokach tekstowych
• W polach formularza, dzięki czemu można je łatwo dotykać na ekranach telefonów komórkowych
• Dowolny element, na którym użytkownicy powinni się skupić

3. Będziesz używać siatki

Siatka jest podstawą doświadczenia użytkownika. Gdy projektujesz za pomocą siatki, końcowa strona internetowa jest bardziej precyzyjna, spójna, a elementy są umieszczane w kolejności, która ma sens wizualny.

Siatki są zarówno poziome, jak i pionowe, chociaż najbardziej znaną siatką do projektowania stron internetowych może być 12-kolumnowa pionowa siatka kolumn do wyrównywania elementów.

Siatka jest czymś, co tylko widzisz w procesie projektowania, a jeśli masz problemy ze znalezieniem miejsc dla elementów lub utworzeniem zorganizowanego konturu, siatka może być całkowitym ratownikiem.

4. Nie zapomnisz wzorów użytkownika

Użytkownicy robią to w określony sposób i oczekują od projektu konkretnych rzeczy. Aby osiągnąć jak największy sukces, projekt powinien wykorzystywać powszechnie akceptowane wzorce użytkowników (powtarzające się rozwiązania problemów projektowych), aby ludzie wiedzieli dokładnie, jak działa projekt.

Typowe wzorce użytkowników obejmują:

• Kolejność informacji w formularzach, zaczynając od imienia lub adresu e-mail, a kończąc na „prześlij”
• Umieszczenie menu nawigacji
• Lokalizacja i klikalny charakter ikony koszyka na e-commerce
• Jak działają powiadomienia?
• Ikony wyszukiwania i czatu, między innymi

Wzorce projektowania interfejsu użytkownika mają długą listę wzorców użytkownika dla wszystkich typów sytuacji projektowych.

5. Będziesz używać podobieństwa w działaniach interfejsu użytkownika

Każdy element w projekcie strony powinien działać jak każdy inny element tego samego typu. Elementy te powinny również posiadać tożsamość wizualną, aby użytkownicy wiedzieli, czym są i co robią na pierwszy rzut oka.

Istnieje tak wiele działań interfejsu użytkownika, które można wbudować w projekt, że przestrzeganie zasady podobieństwa Gestalt jest koniecznością. Grupowanie elementów wizualnych i działań w celu ich identyfikacji wizualnej pomoże zapewnić lepsze ogólne wrażenia dla użytkowników.

6. Dobrze wykorzystasz typografię

Odsuń się od projektu i sprawdź, czy napis jest łatwy do odczytania z daleka.

Nie musisz być głównym typografem, ale to zdecydowanie pomaga.

Tak wiele tego, co stanowi dobry projekt, ma swoje źródło w czytelności i czytelności. Te koncepcje zależą od tego, w jaki sposób wybierasz i używasz krojów pisma.

W razie wątpliwości wybierz proste pary czcionek, takie jak serif i sans serif. Odsuń się od projektu i sprawdź, czy napis jest łatwy do odczytania z daleka. Następnie spójrz na napis na małym płótnie, takim jak ekran telefonu, aby upewnić się, że można go łatwo odczytać na pierwszy rzut oka.

Staraj się używać pisma w środowisku o wysokim kontraście, takim jak jasny typ na ciemnym tle lub ciemny typ na jasnym tle, aby każde słowo było łatwe do odczytania.

7. Nie zapomnisz ekranów siatkówki

Nawet najmniejsze ekrany mogą renderować elementy i obrazy z niemal perfekcyjną pikselą.

Musisz wziąć pod uwagę sposób obsługi obrazów, ikon i innych elementów, aby wszystko pięknie renderowało, niezależnie od wielkości ekranu. Jeśli to możliwe, użycie formatu wektorowego może być idealnym rozwiązaniem, co jest jednym z powodów, dla których SVG stale zyskuje na popularności.

Jeśli nie masz obrazu o rozdzielczości pasującej do popularnych rozmiarów ekranu, nie używaj go. Żaden obraz nie jest lepszy niż obraz zły lub pikselowany.

8. Będziesz szczery

Twój projekt powinien być zgodny z małą firmą, informacjami lub marką i przejrzysty w tym, co robisz. Nie kradnij projektu ani obrazu, nie używaj fałszywych słów kluczowych, aby zwiększyć ruch i być wiernym temu, kto i o czym jest twoja treść.

Przy tak dużym bałaganie w sieci użytkownicy chcą wchodzić w interakcje z projektami, które są autentyczne. Nakłanianie użytkowników do robienia czegoś, rejestrowania się w produkcie lub usłudze lub wprowadzanie ich w błąd co do tematu lub informacji powinno być sprzeczne z osobistym kodeksem etyki. Nie bierz projektów, które oczekują tego od projektu.

9. Nie będziesz ignorować dostępności

Sieć powinna być użyteczna dla jak największej liczby osób. I chociaż zapewnienie, że projekt jest dostępny, może wydawać się trudne, nie jest tak skomplikowane, jak mogłoby się wydawać.

Google ma świetny przewodnik po dostępności stron internetowych, który definiuje w następujący sposób:

Mówiąc ogólnie, gdy mówimy, że witryna jest dostępna, mamy na myśli, że treść witryny jest dostępna, a jej funkcjonalność może być obsługiwana przez dosłownie każdego. Jako programiści łatwo założyć, że wszyscy użytkownicy mogą widzieć i używać klawiatury, myszy lub ekranu dotykowego oraz mogą wchodzić w interakcje z zawartością strony w ten sam sposób. Może to prowadzić do doświadczenia, które działa dobrze dla niektórych osób, ale stwarza problemy, od prostych irytacji po inne.

Dostępność odnosi się zatem do doświadczeń użytkowników, którzy mogą znajdować się poza wąskim zakresem „typowego” użytkownika, który może uzyskiwać dostęp do rzeczy lub wchodzić w interakcje z nimi inaczej niż się spodziewasz. W szczególności dotyczy to użytkowników, którzy doświadczają pewnego rodzaju upośledzenia lub niepełnosprawności - i należy pamiętać, że takie doświadczenie może być niefizyczne lub tymczasowe.

Wiele zasad dobrego projektowania, takich jak rozmiar, kontrast i przestrzeń, przyczynia się do ogólnej dostępności.

WebAIM ma listę kontrolną, a także inne narzędzia, które pomogą Ci ustalić, czy Twój projekt jest dostępny. Lista kontrolna obejmuje cztery obszary związane z dostępnością: Czy projekt jest zauważalny, funkcjonalny, zrozumiały i solidny?

10. Będziesz reagować

To powinno być oczywiste w 2018 roku, ale twoja strona musi reagować. Obejmuje to każdy element, od tekstu przez obrazy, przez przyciski, aż po ogólne ramy.

Każdy projekt musi działać na każdym urządzeniu. Kropka.

Wniosek

Solidny zestaw reguł może pomóc Ci szybciej dostać się do projektu i pracować bardziej konsekwentnie. Zauważ, że żadne z tych przykazań nie mówi ci, jak powinien wyglądać projekt; są zakorzenione w teorii, w jaki sposób zarysowujesz i tworzysz każdą witrynę.

Czy masz dodatkowe zasady projektowania stron internetowych, aby dodać je do tych przykazań? Poinformuj nas, jakie są w mediach społecznościowych. Pamiętaj tylko o oznaczeniu Design Shack!