„ Dobry design sprawia, że użytkownik jest szczęśliwy, producent w czerni, a esteta bez urazy. „
- Raymond Loewy
Układ strony internetowej
Przeglądanie Internetu i surfowanie stały się nieodłączną częścią naszego życia. Każdego dnia przeglądaliśmy n stron internetowych, aby robić zakupy, wyszukiwać, eksplorować i kupować usługi lub po prostu do Google. Zatrzymujemy się tylko na kilku stronach internetowych lub chcemy je odwiedzać wielokrotnie.
Inne nie wydają się zbyt atrakcyjne. Głównym powodem wielokrotnego odwiedzania określonej witryny jest jej układ graficzny. Chociaż trudno jest osiągnąć dobrze zaprojektowaną i usprawnioną funkcjonalną stronę internetową, warto starać się poprawić jakość obsługi klienta.
Udowodniono teraz, że elementem, który wpływa na domniemaną wiarygodność strony internetowej, jest jej projekt, a nie wprowadzana treść. Doskonale zaprojektowana strona internetowa nie musi wkładać wiele wysiłku w inne aspekty, aby utrzymać odwiedzającego na twojej stronie internetowej. Projektowanie UX i UI w tandemie tworzy cały układ i funkcjonalność strony internetowej.
Mistrzem tworzenia idealnego układu strony jest McDonald's. Dosłownie odłożyli wszystko na właściwe miejsce, nawet jak umieścić piklę. Więc chciałbyś również wymyślić coś tak dobrego lub nawet lepszego niż McDonald's.
10 najważniejszych etapów projektowania witryny
Dzisiaj dowiemy się więcej o 10 najważniejszych krokach projektowania strony internetowej Układ podano poniżej:
- Posiadaj profesjonalnie zaprojektowane logo prawidłowo połączone ze stroną główną
- Użyj intuicyjnej nawigacji
- Unikaj bałaganu i daj gościom przestrzeń do oddychania
- Używaj kolorów i obrazów w strategiczny sposób, aby reagować na potrzeby sieci
- Wybierz czcionki responsywne, które są łatwe do odczytania na urządzeniach i przeglądarkach.
- Każda strona powinna być zaprojektowana jako strona docelowa
- Zawsze twórz responsywny projekt, dostosowujący się do wszystkich urządzeń
- Użyj HTML5 zamiast Flasha
- Przyciski Wyślij lub Wyślij powinny być atrakcyjne
- Nie zapomnij przetestować swojego projektu
„Życie jest konwersacyjne. Układ strony powinien być taki sam. W sieci rozmawiasz z kimś, kogo prawdopodobnie nigdy nie spotkałeś, dlatego ważne jest, aby być jasnym i precyzyjnym. Tak więc dobrze zorganizowana nawigacja projektu strony i organizacja treści idą w parze z dobrą rozmową ”.
- CHIKEZIE EJIASI
(Tweet z Twittera)
-
Posiadaj profesjonalnie zaprojektowane logo prawidłowo połączone ze stroną główną
Pierwszą rzeczą, którą identyfikuje firma zajmująca się projektowaniem stron internetowych, jest jej logo. Strona internetowa z profesjonalnie zaprojektowanym logo przemawia do klientów bardziej niż efektowne logo. Logo tworzy tożsamość marki firmy lub strony internetowej.
Zawsze powinieneś skupić się na wykorzystaniu obrazów logo witryny w wysokiej rozdzielczości. obrazy projektu witryny powinny zawsze znajdować się w lewym górnym rogu na każdej stronie witryny. Pamiętaj też o starej, dobrej kciuka, łączącej wszystkie loga na stronie internetowej ze stroną główną, aby w łatwy sposób odwiedzić stronę projektu witryny dla klientów.
-
Nawigacja projektu strony internetowej
Czy zastanawiałeś się kiedyś, dlaczego odbijasz się od tak wielu stron internetowych i trzymasz się tylko jednej lub dwóch? Wynika to z faktu, że klienci nie odczuwają bólu przy opracowywaniu złożonej strony internetowej. Zamiast tego opuszczają stronę i przechodzą do następnej.
Jest to główny powód, dla którego intuicyjna nawigacja jest tak ważna. Podstawowe opcje nawigacji w projekcie witryny powinny być zazwyczaj wdrażane na poziomym pasku menu u góry z dodatkowymi pasami nawigacji pod nim lub pod lewym marginesem na stronie.
Zwróć również uwagę na umieszczanie linków tylko w niezbędnych miejscach, które nie odwracają uwagi klientów od wezwania do działania lub najważniejszej informacji.
-
Unikaj bałaganu i daj klientom przestrzeń do oddychania
Nadmierne użycie grafiki lub przeciążenie obrazów na stronie prowadzi do bałaganu. Obrazy do projektowania stron internetowych są ważnym środkiem zrozumienia, ale wizualne przeciążenie obrazów zatrzymuje przetwarzanie informacji w mózgu.
Klienci stają się zdezorientowani, gdy mają do czynienia ze zbyt wieloma układami stron internetowych. Aby zminimalizować bałagan na stronach docelowych, ogranicz liczbę linków i opcji w nagłówku i stopce. Innym sposobem na usprawnienie stron jest krótkie akapity.
krótki oznacza nie więcej niż pięć do sześciu wierszy, ponieważ klienci tracą zainteresowanie spojrzeniem na bardzo długi tekst. Jest jeszcze jedna kciuka zasada dobrego układu strony internetowej, tj. Dać klientom trochę przestrzeni do oddychania.
Przestrzeń tę można utworzyć, pozostawiając wystarczającą przestrzeń między akapitami i obrazami projektu witryny, aby widz mógł oddychać i wchłaniać więcej funkcji i ofert z witryny. Ponieważ responsywna sieć staje się coraz bardziej konkurencyjna z każdym dniem, obecnie uważa się, że mniej.
Kontrolowane użycie białych znaków w całym układzie pozwoli skupić uwagę użytkowników na treści i zwiększyć komfort użytkowania. Kontrolowany przepływ użytkowników zwiększy zwrot z witryny.
-
Używaj kolorów i obrazów strategicznie dla responsywnego internetu
Aby zaprezentować nowoczesną, pozbawioną bałaganu i elegancką stronę internetową, spróbuj użyć głównie neutralnej palety kolorów. Zważywszy, że konkurencja staje się ostra, zastosowanie niewielkich szczypt kolorów w nagłówkach i kluczowych grafikach pomoże odwiedzającym zatrzymać się na stronie i zwrócić uwagę na najważniejsze szczegóły. Zawsze używaj palety kolorów, która uzupełnia twoje logo i powinna być spójna z innymi materiałami marketingowymi.
Spróbuj zainwestować w fotografię lub zakup profesjonalnych zdjęć stockowych, ponieważ odwiedzający stronę w mgnieniu oka wyszukują ogólne zdjęcia. Obrazy z projektu witryny pozostawiają ogólne wrażenie Twojej firmy.
Profesjonalne fotografie lub dobra fotografia zwrócą uwagę na treść i natychmiast stworzą emocjonalne połączenie. Wystarczy przytoczyć przykład - jeśli chcesz zwrócić uwagę odwiedzającego na konkretną informację lub wezwanie do działania, użyj ludzkiej twarzy skierowanej w tym kierunku lub wskazującego tam palca.
Po prostu dlatego, że człowiek patrzy w tym samym kierunku, w którym patrzy druga osoba. Zarówno kolory, jak i obrazy stron internetowych powinny być wybrane w taki sposób, aby pasowały do wszystkich responsywnych stron internetowych - urządzeń mobilnych, tabletów, laptopów itp.
Polecane kursy
- Program HTML i HTML5
- Szkolenie z certyfikacji testowania oprogramowania
- Kurs online na Drupal 7
- Kursy programowania Drupal 7
-
Wybierz czcionki responsywne
Ponieważ sieć będzie szybko reagować, warto wybrać czcionki odpowiednie dla wszystkich przeglądarek, czy to laptopa, tabletu czy telefonu komórkowego.
Jeśli wybierzesz czcionkę na dużą skalę, są szanse, że będą dobrze czytać na laptopie, ale nie będą dobrze renderować na telefonie komórkowym, tracąc swój wygląd i wygląd. Zawsze wybieraj krój pisma, który można łatwo odczytać, o rozmiarze nie mniejszym niż 11pt.
Jeśli wybierzesz czcionki internetowe, nie używaj więcej niż 2 rodzin czcionek, aby zapewnić szybki czas ładowania. W przypadku projektu o stałej szerokości użyj czcionki, która pozwala na umieszczenie maksymalnie 15 do 20 słów w linii, a w projekcie płynnym, użyj czcionki, która pozwala na 15-20 słów o szerokości 1000 pikseli.
-
Każda strona powinna być zaprojektowana jako strona docelowa
Projektanci stron internetowych zazwyczaj projektują swoje strony internetowe, zakładając, że odwiedzający wejdzie przez stronę główną, a następnie przejdzie na strony docelowe. Ale fakt jest trochę inny. Większość odwiedzających trafia na stronę inną niż Strona główna dla większości witryn.
Tak więc kluczową ideą jest przechowywanie wszystkich głównych informacji na wszystkich stronach docelowych i układzie strony internetowej w taki sposób, aby odwiedzający nie musiał szukać ważnych informacji.
-
Zawsze twórz responsywny projekt, dostosowujący się do wszystkich urządzeń
W tym zatłoczonym świecie, kiedy nie masz czasu na prawidłowe odżywianie, dlaczego musisz zaprojektować inną witrynę dla każdego urządzenia. Zaoszczędź czas i energię, projektując responsywną stronę, która dostosowuje się do rozmiaru przeglądarki w zależności od używanego urządzenia.
Responsywna witryna zazwyczaj przyciąga uwagę użytkowników przez długi czas, zwiększając prawdopodobieństwo współczynników konwersji.
-
Użyj HTML5 zamiast Flasha
Flash staje się przestarzały i kończy się w związku z trwającym sporem między Apple a Adobe. Tak więc projektanci! Wyjdź z mody i wypróbuj więcej opcji internetowych i przyjaznych dla użytkownika.
HTML5 zyskuje popularność dzięki przyjaznemu dla wyszukiwarek tekstowi i łatwej funkcjonalności w mobilnych systemach operacyjnych bez konieczności używania wtyczki, w przeciwieństwie do Flasha.
-
Przyciski Prześlij lub Wyślij powinny być atrakcyjne
Przycisk „Prześlij” lub „Wyślij” u dołu formularza internetowego jest najważniejszym wywołaniem elementu akcji na stronie internetowej. Ale może to być również najbrzydsza część, dlatego projektanci muszą tworzyć przyciski przesyłania formularzy „tak, aby sympatyczni odwiedzający nie mogli się powstrzymać od kliknięcia ich.
Muszą tylko kliknąć. Te przyciski wezwania do działania mogą być interesujące na wiele sposobów, na przykład gdy użytkownik przesuwa mysz nad przyciskiem wezwania do działania, powinien zmienić kolor, gradient, krycie lub czcionkę, aby przyciągnąć uwagę w ułamku sekundy.
Ale uważaj też na to, że przesadzanie czegokolwiek jest złe. Powinien być zwężany do czasu, aż będzie wyglądał atrakcyjnie, w przeciwnym razie może mieć odwrotny wpływ.
-
Nie zapomnij przetestować swojego projektu
Decyzja projektowa to tylko hipoteza. Jesteś najlepszą osobą, która decyduje o tym, co dobrze wygląda na twojej stronie internetowej. Optymalizacja strony internetowej przez wypróbowanie innego miejsca dla przycisków wezwania do działania lub użycie różnych odcieni koloru może mieć duży wpływ na twoją stronę. Testowanie użytkownika Testy A / B i analizy mogą pomóc improwizować na swojej stronie internetowej.
A prawdziwa improwizacja pochodzi od ludzi. Weź ich opinie i wdrażaj, aż będzie dobrze. Wystarczy przytoczyć przykład tego, jak ważne jest testowanie twojego projektu - Microsoft raz zarobił dodatkowe 80 milionów dolarów przychodów tylko dzięki testowaniu i wprowadzeniu określonego odcienia niebieskiego. Nigdy nie wiesz, kiedy Twój projekt może przynieść ogromne zyski.
Te małe problemy mogą wydawać się tak nieznaczne i oczywiste, ale często są odrzucane w wersji na żywo strony internetowej. Do tego czasu firma straciła już niewielki procent potencjalnych dochodów z perspektyw.
Przy kilku dostępnych obecnie platformach generowanie momentów „WOW” z projektów UX i UI witryny nie jest niczym wielkim. Wystarczy niewiele wysiłku i szczypty kreatywności, aby wszyscy odwiedzający powiedzieli WOW po wylądowaniu na Twojej stronie internetowej.
Tak więc idealnym sposobem zaprojektowania strony internetowej jest myślenie. ReThink. Uczyć się. Ucz się jeszcze raz. Nigdy nie używaj tej samej koncepcji. Poznaj potrzeby swoich klientów, a następnie … rozpocznij projekt.
Zmiana praktyki projektowej może mieć ogromny wpływ na zaangażowanie i współczynniki konwersji, tworząc intuicyjną obsługę, która ujawni Twój profesjonalizm, a jednocześnie zapewni to, czego ludzie chcą i potrzebują w efektowny sposób.
Powiązane artykuły:-
To był przewodnik po układzie witryny. Tutaj omówiliśmy 10 najważniejszych kroków układu strony. Możesz także przejrzeć następujące artykuły
- 10 skuteczny sposób dla użytkowników Adobe InDesign
- 8 Pomocnych wskazówek, jak zostać HTML5 a Flash
- 5 skutecznych sposobów na zwiększenie ruchu organicznego w Twojej witrynie
- Jak stworzyć czysty układ strony w Photoshopie
- Lista kilku błędów na stronie i jak je łatwo naprawić
- 5 Konfiguracja strony internetowej Błędy, o których musisz wiedzieć
- Co preferować Drupal lub Joomla
- Drupal 7 vs Drupal