Wszyscy intuicyjnie wiemy, co sprawia, że ​​witryna wygląda źle: nadużywane efekty skosu, corny clip art, przepełnione układy. Te uciążliwości łatwo można poprawić, opracowując z myślą o podstawach projektowania - te same zasady, które są stosowane przez profesjonalnych projektantów i artystów.

Świetne strony internetowe łączą formę i funkcję. W rzeczywistości dobrze zaprojektowane strony internetowe są postrzegane jako bardziej wiarygodne, zgodnie z Badanie Stanforda i są faktycznie łatwiejsze w użyciu (zgodnie z badaniami naukowca Don Norman ). Oto pięć podstawowych zasad, które pomogą Ci zachować wysoką jakość wzornictwa w czołówce twojej praktyki.

1) Przestrzegaj zasad ... głównie

W szkole projektowania dadzą ci listę zasad do przestrzegania, które przypisują zasady do elementów urody, takich jak układ, kolejność i symetria. Ale gdy będziesz postępować, zostaniesz poproszony o złamanie zasad, aby stworzyć miejsca, w których oczy widza będą wyglądać, wykorzystując elementy takie jak różnorodność, napięcie czy kontrast.

Oto jest przykład strony Zrobiłem w Edge Reflow CC. Czy potrafisz dostrzec różne elementy projektu, które są używane, a następnie grać?

2) Użyj obrazów i ikon do komunikowania się, gdy jest to możliwe

Istnieje kilka uniwersalnych ikon, na które ludzie są szkoleni, aby odpowiedzieć. Szkło powiększające (wyszukiwanie), dom (strona główna) i dyskietka (zapis) są już częścią użytkowników. Skorzystaj z nich wizualne skróty ; wszystkie te znaki drogowe powinny być natychmiast rozpoznawalne.

3) Kolor jako element projektu, a nie jako dekoracja

Kolor ma znaczenie, zwłaszcza, że ​​nasze ekrany stają się lepsze na naszych telefonach i tabletach. To aspekt projektowania, który może być naprawdę kluczową częścią historii, którą chce opowiedzieć twoja strona internetowa. Po prostu używaj kolorów do obsługi treści, a nie do dekorowania strony. I często, jeśli używasz zdjęcia, kolory w projekcie powinny być próbkowane na podstawie użytych zdjęć, aby Twój projekt miał przyjemną jednolitą atmosferę.

Lubię ciągnąć przykłady kolorów za pomocą próbek kolorów - i Adobe Kuler Aplikacja internetowa to świetny sposób na zabawę z różnymi motywami, a następnie zaimportowanie ich do narzędzi projektowych. Jedną z najlepszych zasad do zastosowania jest użycie kolorów uzupełniających. Co w zasadzie wykorzystuje ciepłe kolory i chłodne kolory, aby zapewnić równowagę.

4) Wybierz czcionki obsługujące zawartość

Istnieją dosłownie tysiące czcionek do wyboru.

Od Ciebie zależy, czy chcesz łączyć i dopasowywać - ale pamiętaj, że najlepiej jest używać tylko do trzech czcionek naraz - ładnej czcionki nagłówka, jednej dla głównej treści tekstu, a drugiej dla dowolnego wywołania potrzeba. Często oznacza to użycie sans-serif do kopiowania ciała, a na nagłówki można uzyskać bardziej interesujące z serif lub sans-serif.

5) Pomoc od innych

W porządku, masz swoje podstawowe elementy projektu, ładne ikony i obrazy, z kolorystyką dźwięku i zabawnymi czcionkami. Co dalej?

Oczywiście pomoc od innych! I nie tylko przypadkowi ludzie na ulicy, ale konstruktywna krytyka od ludzi, którzy naprawdę znają się na rzeczy, podobnie jak inni projektanci / programiści. Może to być pomocne, aby przejść z witryny OK do takiej, która naprawdę wyskakuje. Jeśli nigdy nie korzystałeś z Behance, aby opublikować pracę w czasie, polecam spróbować. Aktywna społeczność zrobi więcej, niż tylko powie: "aby logo było większe", ale udzieli porad, które mogą odróżnić dobrą stronę internetową od wspaniałej.

Aby głębiej zagłębić się w stosowanie elementów projektu w tworzeniu stron internetowych, sprawdź moją prezentację z SXSW: