Kierunek zawartości wizualnej Co musisz wiedzieć

The wizualny kierunek treści jest rzadziej omawianym, ale kluczowym aspektem projektowania stron internetowych o wysokiej konwersji. Każdy odwiedzający „wchłania” nową witrynę po załadowaniu pierwszej strony - niezależnie od tego, czy robią to świadomie, czy nie.

Estetyka odgrywa pewną rolę, ale chodzi bardziej o ogólny wygląd projektu. Na to uczucie mogą wpływać białe znaki, typografia, symetria, ale przede wszystkim relacje między elementami strony.

Projektanci chcą odwiedzających zostań na stronie i Przewijaj dalej chwytając ich uwagę i zachowując ich zainteresowanie stroną. Zasady projektowania powinny zawsze koncentrować się na funkcji przed formą. Oznacza to, że projekt powinien uzupełniać treść, nie wsuwajcie go po namyśle.

W tym poście chciałbym pokazać kilka wskazówek, jak możesz popraw układy i przepływ treści wizualnych na twojej stronie.

Skup się na kompozycji

Tworzy się każdy element strony internetowej na ogólny układ. Ten ogólny układ tworzy kompozycję zgodną z zasadami teorii Gestalt, która to stwierdza całość jest zawsze większa niż suma części.

Poszczególne obszary strony łączą się w tworzą całość. Elementy projektu muszą zbudować przyciąganie grawitacyjne na zawartość; wszystko na stronie powinno naturalnie kierują gości dalej w dół, aż dotrą na dół strony.

Dlatego relacje między różnymi częściami treści (wizualizacje, tekst, przyciski itp.) Mają tak duże znaczenie przy projektowaniu.

Twoim celem powinno być zachęcanie ludzi przeglądać witrynę z własnej skłonności. Łatwiej powiedzieć niż zrobić, ale możesz się wiele nauczyć studiowanie prawdziwych przykładów.

Strona domowa Monkopa jest doskonałym przykładem hierarchii wizualnej zarówno tekst, jak i wizualizacje. Dużo miejsca jest używane między elementami, a typografia uzupełnia markowe ilustracje wektorowe.

Podczas przewijania zauważysz proste poziome bloki stron podzielone przez kolory, obramowania i grafikę. Są one zbudowane z wzorce projektowe w myślach oferować spójność na całej stronie.

Na dole znajdziesz podział na dwie kolumny z obrazami po jednej stronie, tekst po drugiej. Obrazy również zamieniać strony w układzie prawo-lewo-prawo-lewo. To przyciąga uwagę i rozbija monotonię typowej strony, gdy jest jeszcze utrzymanie naturalnego przepływu w treści.

ZA podobna estetyka projektu można znaleźć na stronie Picjumbo, stronie docelowej dodatku do zdjęć dla użytkowników Photoshop i Sketch.

Strona główna koncentruje się na logo i wideo podglądu. Podczas przewijania zauważysz niestandardowe animacje, które poruszają się po stronie. Ta animacja naprawdę przyciąga uwagę, i dostaje widza zainteresowany, aby kontynuować przewijanie.

Ogólnie rzecz biorąc, strona jest odczuwalna otwarty i łatwy do przeglądania. Treść jest podzielony na poziome bloki z wyraźną typografią i czystymi ikonami.

Rozważ sposób różnych elementów strony balansować razem, przestrzeń między elementami, kontrast między kolorami i różne kształty. Wszystkie te rzeczy odgrywają rolę w ogólnej kompozycji. Każda witryna naturalnie przyciąga określoną zawartość.

Nie ma absolutnej odpowiedzi, ponieważ jest różna dla każdej strony. Na przykład, niektóre linki nawigacyjne wyglądają lepiej, gdy są duże i przewymiarowane. Inni pasują lepiej, kiedy są małe z dużymi literami.

Proponuję studiować inne strony internetowe w swojej niszy. Naprawdę przeanalizuj, jak są połączone. Nawet spróbuj przebudować układy, aby zobaczyć, które elementy w końcu sprawią, że projekt „zbiegnie się”.

Typ Design Matters

Sposób, w jaki zaprojektujesz swoją typografię wpływać na kierunek zawartości na twojej stronie. Ma to związek z hierarchią typów i style projektowania różnych elementów strony jak akapity, nagłówki, listy wypunktowane, cytaty i specjalne elementy układu, takie jak kolumny lub tabele.

Wizualne może również wpływać na układ, dlatego dobrym pomysłem jest zaprojektowanie treści z naturalnym postępem. Napisz treść w taki sposób, aby płynie w dół strony, i trzyma ludzi czytających przez każdy akapit.

Największym narzędziem, jakie masz do dyspozycji, jest twoje oko do projektowania. Naucz się rozpoznawać różnice w elementach typograficznych i ich związek z innymi elementami strony. Twórz relacje między sekcjami strony, aby rozróżnić obszary treści.

Niektóre rzeczy, które możesz rozważyć:

• Rozmiar czcionki
• Rodzina czcionek
• Kontrast kolorów
• Relacje sekcji strony
• Wysokość linii i marginesy akapitu
• Odstępy między literami i małe / duże litery

Na przykład spójrz na stronę główną Monitora kampanii. Górne linki nawigacyjne wykorzystują wszystkie czapki z małymi literami. Inne nagłówki na stronie postępuj zgodnie z tym samym projektem wszystkich czapek który tworzy poczucie jednolitości.

Inne większe nagłówki na stronie są znacznie bardziej widoczny, i naprawdę skaczą ze strony. Wystarczy spojrzeć na typowy projekt nagłówka, aby był łatwy powiedz różnicę między nagłówkiem a jego sparowaną kopią treści.

Typograficzne style projektowania na monitorze kampanii są znakomite, a one naturalnie wtapiają się w układ. Osiągnięcie takiego wyniku wymaga praktyki, ale im więcej się starasz, tym łatwiej będzie.

Aby dowiedzieć się trochę więcej, gorąco polecam następujące linki:

• Zasady projektowania: wizualna waga i kierunek
• Praca z wizualną wagą w projektach
• 19 Czynniki wpływające na równowagę składu

Treść przewodnia

Rozumiem to różne typy stron internetowych mieć różne metody do prowadzenia odwiedzających przez stronę. Na przykład strony docelowe chcą prowadzić użytkowników ciekawostki informacji, małe ikony, zrzuty ekranu, i referencje.

Inne witryny, takie jak blogi, zazwyczaj nie wprowadzają ludzi na stronę główną jednocześnie. Większość ludzi wylądować na stronie artykułu, więc układy postów na blogach są przeznaczone podświetl nagłówek, i przyciągaj ludzi dalej w treść. To właśnie w grę wchodzi wysokiej jakości copywriting, ponieważ chcesz, aby czytelnicy odkładali każde słowo.

Potrzebne są sieci społecznościowe i aplikacje internetowe jakość obsługi użytkownika, więc jest to nieco inny temat, ale zastanów się, jak zaprojektować kanał Facebooka zachęcać do przewijania i interakcji z użytkownikiem.

Metody projektowania, których używasz, aby ludzie przeglądali witrynę zmienia się w czasie. Ale ogólnie twoim celem jest przewodnik gości z wizualnym kierunkiem treści.

Spójrzmy na a wstęp i a projekt bloga dostrzec różnice.

Cactus to statyczny generator witryn dla OS X. Ich strona główna podąża za stylem Apple - mnóstwo białych i cienkich czcionek bezszeryfowych.

Treść jest podzielona na kolumny, bloki i fragmenty tekstu z prostą grafiką. Te same estetyki są wspólne z produktami Apple, więc użytkownicy komputerów Mac będą cieszyć się tym stylem projektowania.

Informacje o produkcie - w tym funkcje i ustawienia - są wymienione bezpośrednio na stronie głównej. Sama strona zachęca do przewijania dzięki unikalnej treści, podstawowych ikon i naprzemiennemu układowi kolumn bloków treści lewo / prawo.

Celem jest dostarczenie informacji istniejących użytkowników, i sprzedać nowi użytkownicy idea Kaktusa.

Teraz porównaj ten projekt ze stroną główną The Next Web. Treść jest znacznie bardziej sporadyczne na stronie głównej bloga, ponieważ jest wiele różnych tematów postów.

Prostokąty tworzą system siatki, który obejmuje wiele postów w jeden układ. Celem jest tutaj uzyskaj użytkowników czytających treści na stronie. Nie ma znaczenia, czy użytkownicy pobierają cokolwiek, ale ma to znaczenie, jeśli trzymaj się, żeby coś przeczytać.

Sposób na czytanie ludzi jest świetne zdjęcia i chwytliwe nagłówki. TNW świetnie sobie z tym radzi, a ich układ jest zbudowany, aby ludzie mogli przeglądać z pokrewnymi miniaturkami postów w obszarze bocznym i po zawartości.

Prowadzenie odwiedzających do określonej akcji jest inne na każdej stronie. Ale możesz się wiele nauczyć, badając, co robią inne udane witryny i ucząc się kopiować.

Zaufaj swoim oczom

Indywidualne właściwości projektowe można wyjaśnić analitycznie, ale zmiany implementacyjne dla każdej witryny. Obraz bohatera z linkiem „Przewiń dalej” nie działa tak samo na wszystkich stronach internetowych.

Nauka projektowania jest bardzo proces wizualny. Twoje spojrzenie na design jest najważniejszym aspektem. Musisz patrz poprawnie zidentyfikować to hierarchia wizualna. Jeśli widzisz go na innych stronach, będziesz mógł go replikować na swoich własnych stronach.

Najlepsza rada, jaką mam, to po prostu zaufaj swoim oczom. Utwórz listę ulubionych stron internetowych i spędzaj 5 minut na przeglądaniu każdego z nich. Zapisz swoje ulubione elementy na stronie i jak wpływają na projekt. To ci pomoże internalizować te pojęcia z perspektywy UI / UX, zamiast perspektywy użytkownika.

Nie bój się również próbować rzeczy! Nikt nie był dobry w projektowaniu właśnie czytając artykuły o projekcie. Tak, pomagają - mogą bardzo pomóc. Ale ty potrzeba do tworzyć rzeczy od podstaw, aby dowiedzieć się, co Prace i co nie.

Trenuj swoje oko, studiując układy stron internetowych, które lubisz, i odtwarzaj je. Z biegiem czasu zbudujesz bibliotekę wzorców w swoim umyśle, co znacznie ułatwi projektowanie nowych witryn.

Zawijanie

Miejmy nadzieję, że te wskazówki pozwolą Ci zacząć i podadzą ci podstawowy plan działania. Nie jest łatwo zostać projektantem stron internetowych, ale świat potrzebuje talentu i nigdy nie było łatwiej nauczyć się tych podstawowych pojęć.

Badanie najlepsze przykłady stron internetowych z elementami strony, które lubisz. Pociąg Twoje oko rozpoznaje związki, a ty szybko rozwijać się umiejętności niezbędne do replika te relacje we własnej pracy.