W artykule:
Chcesz stworzyć silną obecność marki. Masz swoje logo, wybrałeś czcionkę i wybrałeś silną paletę kolorów, aby reprezentować swoją markę. Ale jak upewnić się, że konsekwentnie korzystasz z elementów marki i innych stylowych wyborów w Twojej witrynie WordPress?
Być może polegasz na wielu rundach kontroli jakości pod koniec rozwoju, aby sprawdzić swoją witrynę pod kątem problemów ze spójnością. Ale zaglądasz na swoją stronę po co? Kilka tygodni? Kilka miesięcy? Jestem pewien, że Twoje oczy i mózg są zmęczone tym punktem. Nawet jeśli wystąpiło coś tak subtelnego, jak niedopasowanie czcionki, istnieje duża szansa, że nie zauważysz tego, jeśli nie zbliżasz się do QA świeżym okiem—a kto ma na to czas, gdy jesteś tak blisko mety?
To na pewno balans. Chcesz stworzyć świetnie wyglądającą witrynę i chcesz to zrobić tak szybko i efektywnie, jak to możliwe. Twoim założeniem jest to, że wszelkie problemy z konsystencją zostaną złapane i rozwiązane, zanim strona wyjdzie za drzwi, ale nie możesz tego wiedzieć na pewno. A może ty?
Porozmawiajmy więc o tym, dlaczego spójność jest ważna dla projektowania stron internetowych i jak to (lub jego brak) może wpłynąć na interfejs użytkownika i UX witryny WordPress. Dołączę również kilka narzędzi, których możesz użyć, aby zapewnić, że elementy w Twojej witrynie są konsekwentnie projektowane, umieszczane i pisane, pozostawiając bardzo mało miejsca na błędy na końcu projektu. Przynajmniej pod względem spójności.
10 Sposobów Problemy Spójności Może Zaszkodzić Projektowaniu Stron Internetowych
Dobrze wyglądający design i intuicyjny interfejs znacznie ułatwiają budowanie zaufania wśród odwiedzających. Ale po ustaleniu tego zaufania poprzez początkowe pozytywne wrażenie, musisz pomyśleć o tym, co jeszcze możesz zrobić, aby stworzyć korzystne warunki na swojej stronie.
Pomaga w tym konsekwencja. To tylko niektóre z powodów, dla których:
#1. Branding
Przede wszystkim musi istnieć wyraźny związek między adresem URL witryny, nazwą, logo i wiadomościami. Nawet jeśli nazwa Twojej firmy nie jest czymś, co ludzie z natury kojarzą z tym, co sprzedajesz (na przykład dlaczego ktokolwiek miałby kojarzyć red Bulla z napojem?), Twoja strona powinna ustanowić jasne połączenie między wszystkimi elementami marki-i wzmacniać je w kółko, aby połączenie w końcu wydawało się naturalne w umysłach odwiedzających.
Twierdzę również, że jasny, przemyślany i spójny branding pokazuje odwiedzającym, że dbasz o najdrobniejsze szczegóły. W końcu rozłąka w brandingu może skłonić odwiedzających do zastanowienia się, czy jest to odzwierciedlenie tego, jak prowadzisz interesy. Innymi słowy, jeśli nie możesz poświęcić czasu na kropkę i i krzyż t dla własnej firmy, czy nie będziesz sumienny, jeśli chodzi o dostarczanie wysokiej jakości produktów lub usług swoim klientom?
#2. Wiadomości
Jedną z rzeczy, których wszyscy jesteśmy tak dobrze świadomi w dzisiejszych czasach, jest to, że konsumenci chcą czuć się, jakby łączyli się z ktoś a nie coś w sieci. Dlatego marki, które pokazują prawdziwe osobowości na swoich stronach internetowych i mediach społecznościowych, radzą sobie tak dobrze. Dzięki konsekwentnie pisanej kopii będziesz utrzymywać odwiedzających w kontakcie z doświadczeniem, które twój „głos”nadal prowadzi ich po stronie.
#3. Nawigacja
Możesz pomyśleć, że nawigacja jest łatwa, ponieważ zawsze będzie w tym samym miejscu i będzie stylizowana tak samo na każdej stronie. Jednak spójność to coś więcej niż tylko prezentowanie czegoś w ten sam sposób w Twojej witrynie.
Istnieje również kwestia dostosowania oczekiwań odwiedzających, jak pasek nawigacji powinien działać, ogólnie, z rzeczywistością własną. Oczywiście fajnie byłoby umieścić go na dole witryny lub użyć spersonalizowanego symbolu zamiast ikony hamburgera, ale dla niektórych może to prowadzić do niepotrzebnego zamieszania i frustracji.
#4. UI/UX
Zarówno w projektowaniu UI, jak i UX jest wiele. Nie wdając się w szczegóły, powiem tylko, że wiele z tego, co projektanci UI i UX próbują osiągnąć, to poczucie przewidywalności i komfortu z użytkownikami końcowymi.
Weź coś tak prostego jak przycisk. Kiedy zbliżają się do projektu przycisku, chcą, aby wyglądał on rzeczywiście klikalnie i rozpoznawalnie—i chcą, aby wszystkie przyciski na ich stronie wyglądały tak samo. Celem-dzięki temu i innym sztuczkom projektowym UI i UX-jest ostatecznie usunięcie tarcia z doświadczenia na miejscu. Bez tarcia, rozpraszania uwagi i czkawki po drodze łatwiej jest poprowadzić odwiedzających do celu końcowego (tj. konwersji).
#5. Imagery
Jedną z rzeczy, z którymi zmaga się wielu moich klientów, był proces wyboru obrazu. Były chwile, kiedy otrzymywałem zestaw obrazów, które chcieli wykorzystać, ale to był totalny miszmasz stylów: kreskówkowa ilustracja sprzedawczyni, zbliżone zdjęcie okablowania światłowodowego, abstrakcyjny obraz samochodów jadących późno w nocy po drodze. Podczas gdy każdy z nich w jakiś sposób łączył się z tym, co firma zrobiła, nie było spójnej historii, którą opowiedzieli (jeśli w ogóle), ani nie wydawali się pasować do siebie estetycznie.
#6. Interakcje
Jaki jest cel twojej witryny WordPress? Żeby zachęcić odwiedzających do interakcji, prawda? Chcesz, aby obejrzeli film, przeczytali inny post na blogu lub wypełnili formularz, aby zarejestrować się w Twojej usłudze. Jeśli chodzi o najlepsze praktyki, każdy element, z którym można wchodzić w interakcję za pomocą przewijania, najazdu, dotyku itp., powinien wyglądać i odpowiadać w ten sam sposób w całej witrynie. Daje to odwiedzającym lepsze poczucie kontroli nad ich doświadczeniem, ponieważ mogą przewidzieć, co się stanie, gdy podejmą określone działania.
7. Czytanie
Ponieważ ostrość maleje, a cierpliwość kurczy się u naszych odwiedzających, treści internetowe muszą być łatwiejsze do konsumpcji. Dzięki konsekwentnemu stosowaniu typografii i tagów nagłówka w całym tekście odwiedzający mogą szybciej „nauczyć się” nawigować po stronie, aby uzyskać pożądane informacje. Mogą skanować w dół do następnego tytułu nagłówka lub mogą szukać niebieskiego podkreślonego tekstu dla potrzebnego hiperłącza.
#8. Testowanie
Dzięki konsekwentnemu stosowaniu elementów do projektowania stron internetowych Twoje wysiłki testowania A / B będą bardziej wydajne. Oto dlaczego mówię to: jeśli użyłeś tego samego projektu, kształtu, rozmiaru, odstępu itp.dla określonego elementu na stronie internetowej, twoje testy A/B nie będą musiały skupiać się na niespójnościach przyczyniających się do braku konwersji.
Ponadto, jeśli okaże się, że wspólny element znajdujący się w Twojej witrynie działa lepiej, gdy ma inny kolor lub jest umieszczony w innym miejscu, ułatwi to zarządzanie resztą witryny.
#9. Rytm
Nadanie witrynie logicznego rytmu i przepływu przyczynia się również do spójnego projektu. Na przykład, załóżmy, że umieściłeś 300-pikselowy obraz po lewej stronie strony i zrównoważyłeś go 50-wyrazowym opisem po prawej stronie. Poniżej umieściłeś opis 50 słów po lewej stronie i obraz 300 pikseli po prawej stronie. I tak dalej. Odwiedzający będą mogli odebrać ten przewidywalny rytm,co z kolei pomoże im wiedzieć, czego się spodziewać.
10. Czynniki Zewnętrzne
Jeszcze jedna rzecz, na którą chcę zwrócić uwagę, to fakt, że spójność nie zawsze dotyczy tego, co ustaliłeś w swojej witrynie. Czasami ma to związek z grą w oczekiwania odwiedzających.
Użyję badania umiejscowienia logo, o którym mówiła Brenda, jako przykładu. Chociaż może wydawać się fajnie umieścić swoje logo w środku lub po prawej stronie witryny—a nawet sprawić, że w pewnym momencie zniknie—to nie jest to, czego odwiedzający oczekują od stron internetowych w 2017. Może się to nie wydawać wielką sprawą, ale odstępstwa od znanych najlepszych praktyk projektowych mogą również zaszkodzić wydajności Twojej witryny.
Narzędzia zapewniające spójność w projektowaniu stron internetowych WordPress
Jak wspomniałem wcześniej, wiele rund kontroli jakości na końcu już długiego projektu web design nie zawsze wystarcza, aby zapewnić, że zachowasz spójność w całej witrynie. Dlatego powinieneś mieć zestaw narzędzi, które pomogą Ci zachować spójność w kontroli podczas pracujesz.
Oto co polecam:
#1. WordPress
Zanim przejdziesz do jakichkolwiek zewnętrznych narzędzi, zacznij od razu w WordPress. Jest jeden obszar, który pomoże Ci zmniejszyć prawdopodobieństwo wprowadzenia niespójności do twojej witryny: narzędzie dostosowywania motywu. Tutaj będziesz w stanie ustalić Ustawienia globalne dla:
- Czcionki
- Kolory
- Odstępy
- Animacja Menu
- Linki
- I więcej (zależy to od używanego motywu lub kreatora witryny)
#2. Przewodnik Po Stylu
Każda marka-cyfrowa lub inna-potrzebuje przewodnika po stylu. To definiuje wszystko prosto z bramy, więc nie ma zamieszania podczas tworzenia treści dla Twojej marki. Powinno to obejmować:
- Twoje logo (i różne jego odmiany)
- Paleta kolorów, która obejmuje kolory podstawowe i dodatkowe, kolory tekstu, kolory ikon i wiele innych
- Krojów pisma; najlepiej nie więcej niż dwie lub trzy czcionki
- Imagery
- Ikonografia
- Tekstury i wzory
Zamiast tworzyć własne style guide, znajdź darmowe szablony style guide na stronach takich jak Behance (jak ten pokazany powyżej lub Dribbble.
#3. Zestawy interfejsu użytkownika
Chociaż możesz polegać na motywie witryny, aby zapewnić domyślną stylizację elementów interfejsu użytkownika, większość z was prawdopodobnie woli je spersonalizować, aby pasowały do wyglądu Twojej marki. Tworzenie ich od podstaw wymaga jednak czasu i może nie być czymś, co możesz robić samodzielnie. Tutaj przydają się gotowe zestawy interfejsu użytkownika. Zazwyczaj obejmują one takie elementy, jak palety kolorów, projekty przycisków, widżety, pola formularzy, karty i biblioteki wzorów.
Podobnie jak w przypadku przewodnika po stylu, powinieneś być w stanie znaleźć darmowy szablon UI kit (taki jak powyższy), który będzie dobrze działał dla projektu Twojej witryny.
4. Szkielety i makiety
Proces każdego projektanta stron internetowych będzie się różnić pod względem tego, ile planowania i szkicowania witryny musi być zrobione przed stworzeniem rzeczywistego projektu. Mając to na uwadze, uważam, że szkielety i szorstkie makiety—zwłaszcza te oparte na siatce-są pomocne w wykrywaniu problemów z niewspółosiowością, nieprawidłowym rozmiarem, niespójnymi odstępami i tak dalej.
Kiedy masz przed sobą w pełni zaprojektowaną stronę internetową, łatwo rozpraszać się tym, jak ładnie wygląda lub wszystkimi fajnymi rzeczami, które robi. Dlatego wcześniejsze fazy planowania są dobrym miejscem do wyeliminowania potencjalnych niespójności w zarodku. Osobiście uważam, że Adobe Illustrator jest najlepszym narzędziem opartym na siatce. Jeśli jednak nie korzystasz z Adobe i nie chcesz za to płacić, Możesz znaleźć darmową siatkę online lub użyć Wireframe.cc.
#5. Wtyczki
I wreszcie dochodzimy do wtyczek. Zdaję sobie sprawę, że jest to bardzo ogólna rekomendacja narzędzia, ale przyznaj, że wtyczki wykonują świetną robotę, dając Ci spójne elementy projektu do pracy. Pomyśl o czymś takim jak wyskakujące okienko. Zamiast próbować kodować własne wyskakujące okienka na zapleczu i ryzykować użyciem różnych kolorów, czcionek lub wyskakujących miejsc, wtyczka zapewnia, że wyglądają i działają tak samo za każdym razem.
Jeśli szukasz niezawodnego zasobu wtyczek, który pomoże Ci odgadnąć spójność elementów projektu, zacznij od kolekcji wtyczek WPMU DEV WordPress.
Wrapping Up
Oscar Wilde powiedział kiedyś: „konsekwencja jest znakiem rozpoznawczym niewyobrażalnego.”Teraz, nie chcę się nie zgodzić z Panem Wilde, ponieważ jestem wielkim fanem jego pisania, ale, w tym przypadku, muszę. Chociaż rozumiem, dlaczego niektórzy ludzie mylą „konsekwencję” z ideą tłumienia kreatywności, myślę, że w ogóle tak nie jest. Wierzę, że spójność jest tym, co pozwala projektantom stron internetowych, programistom, a nawet pisarzom mieć więcej czasu, aby być bardziej kreatywnym.
Wprowadzając do witryny identyczne elementy projektu, przewidywalny rytm treści, a także logiczny interfejs, zapewnisz odwiedzającym znajome ustawienie, dzięki któremu mogą się poruszać. To daje Ci czas, aby zaskoczyć ich nieoczekiwanymi smakołykami, takimi jak wyskakujące okienka i animacje.
Tagi:
