3 skuteczne zasady projektowania stron internetowych dla osób nie będących projektantami

Witamy w drugiej części naszej mini serii „Efektywne zasady 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 osoby bez „oczka do projektowania”.

W naszym poprzednim poście omówiliśmy przygotowanie Twojego sposobu myślenia i omówiliśmy kilka sposobów nauczenia się, jak wypracować lepsze oko do projektowania. W tym poście skupimy się na kilku uniwersalnych zasadach dobrego projektowania, które możesz natychmiast zastosować do swoich przedsięwzięć związanych z projektowaniem stron internetowych, aby stać się lepszym w „projektowej” stronie projektowania stron internetowych.

Przejdźmy od razu!

3 skuteczne zasady projektowania stron internetowych dla osób nie będących projektantami

Jak wspomniano w części 1 tej serii, nie ma dobra ani zła, jeśli chodzi o projektowanie. To, co omówimy w tym poście, jest w dużej mierze i powszechnie akceptowane jako dobre zasady projektowania w całej społeczności projektantów stron internetowych. Jest to również moja osobista wskazówka jako projektanta grafiki/druku, który stał się projektantem stron internetowych Divi z prawie dziesięcioletnim doświadczeniem i, co ważniejsze, setkami zadowolonych i zadowolonych klientów. Stosuję te zasady do każdego projektu witryny Divi, który tworzę i chociaż zawsze jest jeden klient, który chce czegoś okropnego lub nietypowego, będą ci dobrze służyć co najmniej 9 na 10 razy

1) Zasada trójpodziału

Jedną z najczęstszych praktyk w zakresie projektowania stron internetowych, projektowania graficznego, projektowania druku, fotografii i innych kreatywnych mediów jest przestrzeganie jednej prostej zasady – zasady trójpodziału. Krótko mówiąc, zasada trójpodziału dotyczy symetrii i równowagi. Celem zasady trójpodziału jest pomoc w osiągnięciu większej równowagi i harmonii w projektowaniu. A najlepsze jest to, że możesz zastosować zasadę trójpodziału do grafiki, obrazów, całych układów stron internetowych i nie tylko!

W sieci toczy się wiele rozmów na temat tego, czy zasada trójpodziału ma charakter naukowy, czy nie, ale niezależnie od tego, popularna opinia pokazuje, że jeśli obraz lub projekt jest zbyt podobny zarówno w lewej, jak i prawej połowie lub u góry i u dołu, widzowie mogą go znaleźć nudne lub nudne. Jeśli już, to zasada trójpodziału sprawia, że ​​jest to interesujące i może prowadzić do dobrego przepływu, który omówimy poniżej.

W naszym poprzednim poście na temat wskazówek projektowych, aby zoptymalizować zawartość internetową Divi, jest on również określany jako system siatki, co jest świetnym sposobem na wizualne myślenie o tym. Wyobraź sobie siatkę, która wygląda tak:

Dzięki tej wyimaginowanej siatce na obrazie, grafice lub układzie możesz łatwo umieścić zawartość w pobliżu jednego lub więcej głównych punktów przecięcia.

Utrzymywanie obiektów i punktów ogniskowych w 1 lub więcej z 4 punktów przecięcia często pozwala uzyskać bardziej zrównoważony, symetryczny wygląd, w przeciwieństwie do drugiego przykładu, w którym obiekt znajduje się poniżej punktu przecięcia. Spójrz na poniższy obrazek. Pierwszy przykład NIE jest zgodny z zasadą trójpodziału.

Ten przykład jest zgodny z zasadą trójpodziału.

Chociaż pierwszy przykład jest nadal ładnym obrazem, użycie zasady trójpodziału zapewnia zupełnie inne wrażenie obrazu, przecinając pierwszy plan z dolnymi punktami przecięcia w zasadzie trójpodziału. Przyjrzyjmy się obrazowi z regułą siatki trójek.

Przyjrzyjmy się teraz obrazowi bez wyrównywania zasady przecięcia trójek.

Widać dużą różnicę, jeśli chodzi o to, jak przyjemne dla oka projekty często układają się w jednym lub większej liczbie punktów przecięcia. Chociaż zasada trójpodziału jest najczęściej używana w fotografii i wideografii, jest ona równie ważna przy projektowaniu stron internetowych. Pokażę Ci, jak zastosowałem zasadę trójpodziału na mojej osobistej stronie. Oto migawka początkowego projektu „nad zakładką”, który dotyczy tego, co widzi widz przed przewinięciem w dół.

Teraz umieśćmy siatkę zasad trójpodziału nad główną sekcją i zobaczmy, jak to wygląda. W tym przypadku skupię się na treści poniżej głównego menu, w którym zaimplementowałem zasadę trójpodziału.

W tym przykładzie są 4 główne elementy, które znajdują się na punktach przecięcia lub w ich pobliżu. Krótko mówiąc, chciałem zaakcentować:

1. Krótki opis tego, kim jestem i o czym jest ta strona.
2. Obraz, który pozwala nowym użytkownikom czuć się bardziej komfortowo i ufać, widząc, od kogo usłyszą.
3. Grafika mojego najnowszego e-booka dająca ludziom powód do rejestracji.
4. Wreszcie, wiadomość e-mail z wezwaniem do działania zarejestruje się w ostatnich 2 ramkach, na których kończy się oko użytkownika.

Z zasadą trójpodziału generalnie nie jest dobrą praktyką, aby mieć coś w każdym punkcie przecięcia (szczególnie w fotografii), ale często stosuję ten układ w moich kompilacjach stron internetowych. I na marginesie: ponieważ czytamy od lewej do prawej, często mam wezwania do działania pośrodku lub po prawej stronie ekranu, ponieważ tam kończy się nasze oko. Wezwania do działania omówimy bardziej szczegółowo w ostatnim poście z tej serii, ale jest to dobry przykład tego, jak zaimplementowałem zasadę trójpodziału w swoim projekcie.

Jeśli więc nie masz pewności, jak zaprojektować stronę internetową lub zmagasz się z mieszaniem obrazów, tekstu i być może wezwania do działania, spróbuj zastosować zasadę trójpodziału i niech to będzie Twoim przewodnikiem.

2) Układ i przepływ

Jeśli chodzi o układanie i projektowanie strony internetowej, znowu nie ma dobrego lub złego stylu. Często zależy to od projektu, życzeń klienta, stylu projektowania i często rynku, na który kierujesz reklamy. Najczęściej w branży cyfrowej lub usługach takich jak agencje projektowania stron internetowych, moda i fotografia bardziej nowoczesne i modne projekty o minimalistycznym wyglądzie i stylu. Wraz z nowoczesnym designem często pojawia się więcej otwartej przestrzeni, mniej treści opartych na tekście, więcej obrazów i być może więcej przewijania. (Niektórzy z moich staromodnych klientów po prostu wzdrygnęli się!)

Na bardziej tradycyjnych rynkach biznesowych, takich jak produkcja, kancelarie prawne, branże pracowników fizycznych itp., prawdopodobnie znajdziesz strony internetowe zawierające więcej treści tekstowych, mniej otwartej przestrzeni i niewątpliwie z mniej… atrakcyjnymi elementami graficznymi i projektowymi. I z jakiegoś powodu większość moich klientów z tych branż jest zdecydowanie przeciwna zbyt częstemu przewijaniu. Dlatego kluczem jest wiedza, jak zaprojektować układ z dobrym przepływem! Często stwierdzam, że muszę próbować zrównoważyć MÓJ kreatywny styl projektowania z tym, co sprawdza się w branży mojego klienta, docelowej grupie demograficznej oraz pragnieniach i potrzebach mojego klienta. Biorąc to wszystko pod uwagę, istnieje kilka podstawowych zasad dotyczących układu i przepływu, które można zastosować bez względu na to, z kim pracujesz i w jakiej branży się znajdują.

Patrząc wstecz na poprzedni post wspomniany powyżej, bardzo ważną wskazówką do naśladowania jest wzór z projektowania. Znajdziesz to często dzięki wielu nowym profesjonalnym zestawom układów Divi, które są dostarczane co tydzień.

Rzućmy okiem na to, co mam na myśli.

W pierwszym przykładzie po lewej stronie jest obraz po lewej, tekst po prawej z ładnym przyciskiem wezwania do działania, następnie oko czyta w dół i po lewej stronie do innej sekcji tekstu/wezwania do działania, a następnie kolejny obraz po prawej i powtórz. Na odwrót, na zdjęciu po prawej stronie widać odwrócony wzór. Tekst na obraz na obraz na tekst itp. Stosowanie tego wzoru w stylu Z to świetny sposób na zainteresowanie czytelników i jest wspaniałym sposobem na zrównoważenie tekstu i obrazów.

Nie jest to jedyna opcja dla układu w przepływie w dobrym projekcie strony, ale dobrą praktyką jest to, że pobieramy treść od lewej do prawej, a następnie w dół. Potem od lewej do prawej, potem w dół i tak dalej. Jeśli więc masz wątpliwości, spróbuj zastosować wzorzec stylu z jako sposób na uporządkowanie przepływu zawartości strony. I ostatnia uwaga na temat przewijania – mam tendencję do utrzymywania moich witryn w granicach 3-5 zwojów. Częściej niż nie, im więcej musisz przewijać, tym większa będzie strona i tym wolniej się ładuje. Ponownie, nie ma nic złego w przewijaniu, ale jeśli nie pracowałeś jeszcze z klientami o bardziej staroświeckim sposobie myślenia, masz gwarancję, że napotkasz jakiś opór. Staram się potwierdzić tym klientom, że przewijania nie należy się bać. Media społecznościowe nauczyły nas ciągłego przewijania i szybkiego pobierania treści.

3) Hierarchia Wizualna

Ostatnią główną zasadą, na którą chciałbym tutaj zwrócić uwagę, jest hierarchia wizualna. Krótko mówiąc, hierarchia pomaga użytkownikowi zorientować się, jakie są najważniejsze informacje i daje mu bardzo jasny kierunek, w którą stronę powinien skierować jego wzrok w projekcie. Hierarchia jest często nawiązywana do typografii (do której zajmiemy się w naszym trzecim poście), ale może być również bardzo ważna w elementach graficznych, obrazach i ogólnym projekcie witryny.

Nie zamierzam celowo wskazywać witryn, których brakuje mi w dziale „dobrego projektu”, ale jestem pewien, że natknąłeś się na wiele witryn, które mają szeroki wybór tekstu i obrazów, które są tego samego rozmiaru bez wyraźnego wezwanie do działania, prawda? Tego chcemy uniknąć. Korzystanie z dobrej hierarchii jest najlepszym sposobem, aby poprowadzić użytkownika witryny, aby wiedział, CO powinien kliknąć lub zrobić dalej.

Oto przykład ostatniego projektu, który stworzyłem z myślą o hierarchii:

Podczas gdy logo i numer telefonu w prawym górnym rogu są wyraźnie duże i widoczne, największa treść i najbardziej żywy kolor nad zakładką to wezwanie do działania, aby kliknąć przycisk.

Mój klient szczególnie chciał, aby ludzie mogli łatwo poprosić o inspekcję zaraz po wejściu na stronę, więc wykorzystałem tę ideę hierarchii wizualnej, aby, miejmy nadzieję, osiągnąć właśnie to! Innym przykładem tego, jak ostatnio używałem hierarchii, jest projekt nad zakładką na tej stronie:

W takim przypadku głównym wezwaniem do działania klienta jest zakup przez Internet lub bezpośredni kontakt. Logo, krótki opis, a nawet numer telefonu są powszechne, ale podwójny przycisk Divi jest największym elementem, który widzisz na początku, w nadziei, że użytkownicy klikną to, czego szukają, jeśli nie będą dalej przewijać.

Więc znowu, chociaż jest to tylko kilka przykładów hierarchii wizualnej, może to być bardzo potężna metoda kierowania użytkowników witryny do robienia tego, co chcesz, lub pójścia tam, gdzie chcesz! Na marginesie, gorąco polecam zapoznanie się z naszym poprzednim postem na temat typowych błędów projektowania stron internetowych, których należy unikać.

W zamknięciu

Mam nadzieję, że te skuteczne zasady projektowania pomogły Ci w projektach, niezależnie od tego, czy dopiero zaczynasz projektowanie stron internetowych, czy też chcesz być lepszy w projektowaniu! Ponownie, jest wiele zasad, które moglibyśmy omówić, ale to są 3 najlepsze, które staram się zastosować we wszystkich moich projektach stron internetowych.

Jeśli masz jakieś inne zasady projektowania, którymi chciałbyś się podzielić, daj nam znać w komentarzach poniżej!

Jutro: 3 ważne obszary projektowania, na których należy się skoncentrować przy każdej budowie witryny

Teraz, gdy omówiliśmy przygotowanie naszego sposobu myślenia, jak nauczyć się mieć lepsze oko do projektowania i omówiliśmy kilka podstawowych zasad projektowania, nasz ostatni post będzie dotyczył kilku najważniejszych aspektów projektowania stron internetowych, na których należy się skoncentrować. każda budowa strony internetowej. Do tej pory!

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!