3 ważne obszary projektowania, na których należy się skoncentrować przy każdej kompilacji strony internetowej

Witamy w części 3, ostatnim poście z naszej mini serii „Zasady skutecznego projektowania stron internetowych Divi”, w której badamy skuteczne praktyki projektowania, aby pomóc nowym projektantom stron internetowych i tym, którzy identyfikują się jako ktoś bez „oczka do projektowania”.

Teraz, gdy omówiliśmy przygotowywanie i nauczenie się, jak mieć lepsze oko do projektowania i omówiliśmy kilka skutecznych zasad projektowania, które należy umieścić w naszym zestawie narzędzi, skupimy się na 3 bardzo ważnych obszarach projektowania, które są kluczowe dla osiągnięcia dobrze zaprojektowana strona.

Przejdźmy od razu!

3 ważne obszary projektowania, na których należy się skoncentrować przy każdej kompilacji strony internetowej

Jeśli byłeś na bieżąco z dwoma pierwszymi postami z tej serii, słyszałeś, jak zwracałem uwagę, że nie ma nic dobrego ani zła, jeśli chodzi o projektowanie, ale oprócz skutecznych zasad projektowania, które omówiliśmy, jest kilka ważnych , praktyczne obszary projektowania, na których się skupiam, aby za każdym razem tworzyć udaną, przyjemną dla oka stronę internetową. A najlepsze jest to, że te pomysły można przenieść do dowolnego rodzaju branży lub stylu projektowania stron internetowych!

1) Typografia i czcionki

Twoja witryna może mieć piękne obrazy, angażujące kolory i przyjemne elementy projektu, ale jeśli typ wygląda inaczej lub nie pasuje do stylu witryny, może to być poważnym środkiem odstraszającym. Ponieważ w tej serii nie zagłębiamy się w podstawy typografii, zapoznaj się z naszym postem 50 terminów typograficznych, które każdy projektant stron internetowych powinien znać (i zrozumieć), jeśli chcesz dowiedzieć się więcej o podstawach. Zrozumienie czcionek kerningowych, wiodących, śledzących, bezszeryfowych i bezszeryfowych będzie bardzo przydatne dla osoby, która chce lepiej pisać i projektować.

Pozwól, że przedstawię Ci kilka praktycznych wskazówek dotyczących typografii, których trzymam się jako odnoszący sukcesy projektant stron internetowych Divi z klientami, którzy znacznie różnią się stylami projektowania i różnymi branżami:

Używaj czcionek, które dobrze pasują do branży/projektu Twojej witryny — W pierwszym poście z tej serii przywołałem przykład, w którym sam zaprojektowałem witrynę, która miała świetne obrazy i kolory, ale czcionka nie pasowała dobrze. Krótko mówiąc, był to zakład przemysłowy, a czcionka, której początkowo użyłem, była bardziej nowoczesna, elegancka, która rzeczywiście nie pasowała do wyglądu i marki firmy.

Nie oznacza to, że nie możesz być kreatywny z czcionkami lub że musisz dopasować się do status quo w branży, ale praktycznie, jeśli pracujesz w profesjonalnej witrynie serwisowej, prawdopodobnie nie będziesz chciał w grę wchodzi najwyższa, artystyczna czcionka. I vice versa, jeśli pracujesz nad czymś o wyjątkowym, być może artystycznym klimacie, może Arial lub Helvetica nie będą pasować do klimatu, do którego dążysz. To prowadzi mnie do kolejnego punktu mieszania i dopasowywania czcionek.

Trzymaj się od 2 do 3 czcionek — podstawową zasadą projektowania, która przetrwała próbę czasu od dziesięcioleci, jest ograniczenie liczby używanych czcionek. Zbyt wiele czcionek rozprasza czytelnika, często myli hierarchię i, szczerze mówiąc, wygląda jak stara zachodnia ulotka szukająca nagrody dla wyjętego spod prawa. Często trzymam się jednej czcionki dla nagłówków i tytułów, a następnie używam łatwej do odczytania czcionki bezszeryfowej dla całego tekstu akapitu. Czasami używam czcionki w trzecim stylu dla głównego menu, ale moja czcionka menu jest często uproszczona z moimi tytułami.

Więcej pomysłów na łączenie czcionek można znaleźć w poprzednim poście na temat parowania czcionek w projektowaniu stron internetowych: 7 kluczowych zasad ujawnionych i wyjaśnionych

Miej wizualizacje z tekstem — przyzwoita ilość tekstu w treści jest świetna. W rzeczywistości zaleca się, aby mieć co najmniej 300 słów na stronę, aby pomóc z punktu widzenia SEO. Ale uważaj na zbyt dużo tekstu i za mało pomocy wizualnych. W przypadku książek, blogów, artykułów i innych długich treści oczekuje się dużej ilości tekstu, ale jeśli projektujesz ładną, angażującą stronę docelową, zbyt duża ilość treści znudzi użytkownika, zanim zacznie szukać dalej. Często projektuję z myślą, że strona tytułowa powinna być lejkiem sprzedażowym, który prowadzi klientów przez drzwi. WTEDY mogą zagłębić się w więcej stron, blogów i innych zasobów, aby uzyskać bardziej szczegółowe informacje.

Strona główna Elegant Themes jest obecnie doskonałym tego przykładem.

W tym przykładzie widzimy angażujący tytuł, akapit tekstu z przyciskiem wezwania do działania i ładną grafikę wizualną, która łączy się z wiadomością, co utrzymuje zaangażowanie użytkownika. To świetny przykład do naśladowania, organizując przyzwoitą ilość tekstu z elementami wizualnymi.

Kiedyś miałem piękną stronę tytułową zaprojektowaną z tekstem i grafiką, a kiedy przekazałem ją mojemu klientowi w celu dokonania podstawowych zmian, zrzucili coś, co wyglądało jak mały rozdział książki na pierwszą stronę, co całkowicie zrujnowało przepływ projektu Ja stworzyłem. Więc niech to będzie lekcja i wiedz, że chociaż treść jest świetna, musi być odpowiednio umieszczona!

Kolejnym świetnym źródłem, do którego warto się odnieść, jest 20 trendów typograficznych, na które należy zwrócić uwagę w 2016 roku, ponieważ trendy te są nadal bardzo aktualne i będą się rozwijać.

2) Zarządzanie obrazami i kolorami

Podobnie jak w typografii, zwykle trzymam się co najwyżej 2 do 3 podstawowych kolorów w moich kompilacjach stron internetowych. O ile nie jest to firma lub organizacja z mnóstwem kolorów w brandingu, uważam, że zbyt wiele kolorów (zwłaszcza jeśli nie pasują do siebie) może być bardzo rozpraszające i często mylące. Oto kilka wskazówek, których się trzymam podczas mieszania kolorów i obrazów:

Kolory bazowe i kolory akcentujące – Jedną z metod, które bardzo dobrze sprawdziłam w ostatnich projektach, jest skorzystanie z brandingu klienta, a jeśli jeszcze tego nie zrobił, wybierz ładny kolor akcentujący dla wezwania do działania, linków itp. Na przykład w tym stronie, wziąłem branding logo za pomocą szarości i pomarańczy i dodałem subtelny, ciemny turkusowy/niebieski, aby pomóc uczynić pomarańczowy „pop” jako główny kolor akcentujący.

Usprawnij kolory za pomocą obrazów — jednym ze sposobów na doskonałe połączenie projektu i obrazów jest dopasowanie kolorów witryny do niektórych podstawowych obrazów. Ten przykład jest trochę rzadki, ponieważ udało mi się dopasować kolory witryny do stroju mojego klienta, co pozwoliło uzyskać bardzo przyjemne, uproszczone wrażenie między obrazem a kolorem witryny.

Wziąłem ładny bordowy i pomarańczowy kolor ze stroju moich klientów i udało mi się połączyć całą witrynę w ładny, umundurowany wygląd. Teraz rzadko będziesz w sytuacji, w której możesz oznaczyć całą witrynę na podstawie obrazu, ale tę samą zasadę można zastosować, gdy używasz obrazów tła z wezwaniem do działania itp.!

Praktycznie, jeśli nie masz pewności, jak wybrać określone kolory, oto 10 narzędzi do wybierania kolorów

Trzymaj się z dala od zbyt żywych kolorów – często widzę, że nowi projektanci używają super jasnych zieleni, różów, żółci itp., które powodują, że jeden zmrużysz oczy i odsuwają się od ekranu. Nie będę tu wskazywał żadnych złych przykładów, ale jestem pewien, że widziałeś wiele stron, w których kolory sprawiły, że odwróciłeś się i nigdy nie chciałeś oglądać za siebie. Z pewnością nie ma nic złego w żywych kolorach, po prostu upewnij się, że nie dają takiego efektu. W tym miejscu może się opłacić konstruktywna krytyka i informacje zwrotne od innych projektantów.

Moją rekomendacją jest użycie dość neutralnych kolorów dla kolorów podstawowych, takich jak tekst, grafika tła itp., a następnie użycie bardziej żywych kolorów dla wezwań do działania, linków i bardziej przyciągających uwagę obszarów projektu strony. Jeśli nie masz doświadczenia w projektowaniu, a kolor nie jest dla Ciebie wygodnym obszarem, możesz wrócić do naszych technik dopasowywania kolorów dla projektantów stron internetowych WordPress, które zapewnią wiele opcji lepszego doboru kolorów.

3) Silne wezwanie do działania

Wreszcie, bardzo ważnym obszarem projektowania stron internetowych jest posiadanie silnego i jasnego wezwania do działania (CTA). Jednym z najczęstszych problemów złego projektowania stron internetowych jest posiadanie dużej ilości treści opartych na tekście bez wyraźnego wezwania do działania. Treść jest świetna, ale jeśli są to wszystkie informacje i brak konwersji, Twój klient na pewno nie będzie zadowolony. Zalecam wyróżnienie CTA spośród innych elementów projektu za pomocą akcentującego koloru lub ładnego efektu najechania.

Oto przykład, jak zaimplementowałem wezwanie do działania dla niedawnego klienta.

W tym przypadku głównym wezwaniem klienta do działania dla użytkowników witryny jest zapisanie się na aktualizacje e-mail, więc od razu mamy logo wyskakujące z ciemniejszego obrazu tła, trochę tekstu z natychmiastową możliwością zarejestrowania się jeszcze przed przewinięciem w dół. Najlepiej, jeśli chcesz przyciągnąć uwagę użytkownika do swojego wezwania do działania. W tym miejscu niezwykle korzystny jest żywy akcent kolorystyczny lub efekt na stronie.

Oto kilka wskazówek, których się trzymam, jeśli chodzi o wezwanie do działania:

Zakończ swoją stronę główną silnym wezwaniem do działania — najczęściej projekty moich stron głównych są prawie podsumowaniem witryny jako całości. Na przykład, jeśli witryna ma taką strukturę:

• O nas
• Usługi
• Referencje
• Blog
• Kontakt

Wykonam wezwanie do działania dla każdej z tych sekcji na stronie głównej, a następnie ostateczny, elegancki projekt głównego wezwania do działania, którym w tym przypadku będzie rejestracja. Oto doskonały przykład tego, co mam na myśli:

Strona główna zasadniczo obejmuje całą witrynę i jest punktem wyjścia, z którego użytkownicy mogą kliknąć, aby wyświetlić galerie, filmy i więcej informacji. Być może ten sposób myślenia pomoże ci, tak jak w projektach twojej strony głównej!

Umieść wezwanie do działania na pasku bocznym — nie zapomnij o możliwości umieszczenia silnego wezwania do działania na pasku bocznym! Zwłaszcza jeśli masz witrynę z postami na blogu lub inne strony, które często używają paska bocznego. To świetna okazja, aby dodać dodatkowy e-mail do rejestracji, przycisk darowizny lub link do innego głównego CTA.

Podobnie jak w przypadku powyższej witryny, jednym z głównych wezwań do działania w mojej osobistej witrynie jest rejestracja za pomocą poczty e-mail i chociaż znajduje się ona na środku mojej strony głównej, chciałam się upewnić, że jest to również bardzo widoczne w moim blogu i na stronach z samouczkami .

Tutaj mam go w prawym górnym rogu każdego szablonu posta wraz z silnym obrazem powyżej i poniżej głównego formularza rejestracji. Jeśli więc masz strony z paskami bocznymi, pamiętaj, że te obszary są cennymi nieruchomościami, które stanowią silne wezwanie do działania! I chcesz mieć pewność, że Twoje wezwanie do działania jest zauważalne i najlepiej u góry paska bocznego, które pojawi się jako pierwsze na telefonie komórkowym pod główną treścią.

Miej wezwanie do działania po zawartości podstrony – Wreszcie, a być może najczęściej pomijanym, jest pamiętanie o wezwaniu do działania na zwykłych stronach! Ja sam przyznaję, że przeoczyłem to do niedawna, kiedy poprosił o to klient. Poniższy przykład zawiera silne wezwanie do działania na końcu stron głównych usług.

Gdy użytkownik witryny wyświetli tę stronę, przyjmie wszystkie informacje, a następnie będzie miał możliwość skontaktowania się z moim klientem, jeśli jest zainteresowany, za pomocą ładnego, powitalnego obrazu po prawej stronie i przycisku CTA po lewej stronie z żywym pomarańczowym kolorem, który pomaga tej sekcji wyskocz ze strony. Tak, wiem, że powiedziałem w poprzednim poście, że zwykle umieszczam moje CTA pośrodku lub po prawej, ale ten układ po prostu działał ładnie

Podsumowanie serii

Cóż, mam nadzieję, że ta seria zainspirowała Cię dobrymi zasadami i taktykami projektowania stron internetowych, które możesz zastosować w swoich projektach! Zróbmy szybkie podsumowanie tego, co przeszliśmy w całej mini serii:

Część 1

• Przygotowanie swojego sposobu myślenia
• Jak nauczyć się dobrych trendów projektowych
• Uzyskaj informacje zwrotne i konstruktywną krytykę swojej pracy

Część 2

• Przestrzegaj zasady trójpodziału
• Układ i przepływ
• Hierarchia wizualna

Część 3

• Typografia i czcionki
• Obrazy i kolor
• Silne wezwanie do działania

Ponownie, całe studia akademickie zostały poświęcone dobremu projektowi, więc tylko drapiemy tu powierzchnię, ale mam nadzieję, że te zasady i praktyki pomogły we właściwym kierunku skierować tych z was, którzy chcą doskonalić się w projektowaniu. Jeśli masz jakieś inne zasady lub metody projektowania, które pomogły Ci, którymi chciałbyś się podzielić, daj nam znać w komentarzach poniżej!

Oto dla nas wszystkich, którzy każdego dnia stają się coraz lepszymi projektantami Divi Web!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!