7 kluczowych zasad projektowania

Jak sprawić, by projektowanie stron internetowych wyglądało dobrze

  • Zrównoważ swój projekt.
  • Podział projektu na części przy użyciu siatek.
  • Wybierz maksymalnie dwa lub trzy kolory podstawowe dla swojego projektu.
  • Postaraj się, aby grafika dobrze do siebie pasowała.
  • Popraw typografię swojej witryny.
  • Wyróżnij elementy, dodając do nich białe znaki.
  • Połącz wszystkie elementy.

Wydaje się, że wszyscy i ich dziadek (i pies) mają stronę internetową. Sieć staje się coraz bardziej zatłoczona z dnia na dzień, a dosłownie dziesiątki stron internetowych są dodawane podczas czytania tego artykułu. Coraz trudniej jest zostać zauważonym wśród mas.

„Na szczęście” dla nas projektantów, nie każdy zdaje się rozumieć, co sprawia, że ​​projektowanie stron internetowych jest przerywane. To prawda, że ​​projektowanie stron internetowych jest w dużej mierze procesem twórczym i dlatego można je nazwać bardziej sztuką niż nauką. Ale ponieważ jest to z natury środek prezentacji, obowiązują pewne zasady (lub przynajmniej zasady). Podążając za prostymi wskazówkami, każdy powinien być w stanie stworzyć atrakcyjny wizualnie projekt i zrobić krok bliżej do sławy. Dobra, to nie takie proste, a talent i doświadczenie mają znaczenie, ale każdy może zamienić swoją stronę domową w coś ładniejszego w ciągu zaledwie kilku minut.

Jak sprawić, by projektowanie stron internetowych wyglądało dobrze

Więc co sprawia, że ​​coś jest ładne? To nie jest Flash. Nie znaczy to, że Flash nie ma zalet, ale sam Flash nie czyni dobrego projektu; niektóre paskudne strony Flash są tam. Ponadto nie trzeba być wspaniałym ilustratorem, aby tworzyć atrakcyjne projekty. Zamiast tego spójrz na Web design jako symbiozę różnych elementów. Żaden pojedynczy element nie liczy się najbardziej; suma elementów sprawia, że ​​projekt wygląda dobrze.

  1. Zachowaj równowagę projektu.

Równowaga polega na upewnieniu się, że projekt nie przechyla się na jedną lub drugą stronę. To jest jak równowaga wagi w osiąganiu symetrii lub asymetrii.
Przykład

Spójrz na psa w grafice nagłówka na stronie internetowej Khoi Vinh’s Subtraction poniżej. Wziąłem ten przykład z „Zasady pięknych stron internetowych” autorstwa Jasona Beairda. Jason wskazuje, jak krzyż po prawej stronie kompensuje dodatkową wagę wizualną, którą pies zapewnia po lewej stronie. Jest to mały, ale nie bez znaczenia szczegół. Przekonaj się sam, chowając krzyż ręką.

To właśnie nazywamy równowagą asymetryczną i na tym polega równowaga. Jeśli nie zwracasz uwagi na to, jak się układasz, projekt szybko stanie się niezrównoważony. Możesz manipulować wizualną wagą projektu na wiele sposobów, takich jak kolor, rozmiar i dodawanie lub usuwanie elementów. Gdyby sprawić, że krzyżyk będzie, powiedzmy, żywym pomarańczem, stałby się cięższy i być może wyrzuciłby układ ponownie. Osiągnięcie asymetrycznej równowagi jest szczególnie delikatną sprawą, która wymaga czasu, aby dostroić i nieco wyszkolonego oka, aby naprawdę się wycofać.

Poniżej znajduje się kolejny przykład symetrycznej równowagi, tej pierwszej The Dwadzieścia. Mimo że grafika nagłówka jest asymetrycznie zrównoważona (czy można zauważyć, jak to się robi?), Reszta projektu niżej ma symetryczne kolumny. Asymetryczna równowaga może być trudniejsza do zniesienia, ale sprawia, że ​​projekt jest bardziej zabawny.

Przekonasz się, że każdy projekt, który Twoim zdaniem wygląda dobrze, ma dobrze skonstruowaną równowagę. A każdy projekt, który tutaj opisujemy, osiąga wysokie wyniki w każdej z siedmiu omawianych zasad. Więc poświęć chwilę, aby przewinąć w górę iw dół i przekonać się, czy wszyscy przechodzą.

  1. Podział projektu na części przy użyciu siatek.

Koncepcja siatek jest ściśle związana z pojęciem równowagi. Siatki to seria linijek poziomych i pionowych, które pomagają „podzielić” projekt. Pomyśl o kolumnach. Kolumny poprawiają czytelność, co ułatwia wchłanianie treści strony. Odstępy i użycie zasady trzeciej (lub podobnej złotej proporcji) ułatwiają oko.

Zasady Reguły Trzeciego i Złotego Stosunku wyjaśniają, dlaczego na przykład paski boczne mają zazwyczaj około jednej trzeciej szerokości strony i dlaczego główny obszar treści jest mniej więcej równy szerokości projektu podzielonej przez 1,62 (równa się phi w matematyce). Nie zrozumiemy, dlaczego tak się dzieje, ale wydaje się, że jest to prawdziwe w praktyce. Dlatego też temat w profesjonalnie wykonanych fotografiach jest zwykle umieszczony nie na środku, ale na przecięciu wyimaginowanej siatki dziewięciu kwadratów (trzy na trzy, z dwiema poziomymi i dwiema pionowymi liniami).
Przykład

Siatka nadaje się szczególnie dobrze do minimalistycznych wzorów. 5 Thirty One Dereka Punsalana pokazuje dlaczego:

Choć sama konstrukcja nie jest imponująca wizualnie, wyraźna ścisła struktura elementów ułatwia oko. Lewa kolumna jest w przybliżeniu dwa razy większa niż prawy pasek boczny, co ma sens i jest czymś, o czym należy pomyśleć podczas tworzenia własnych projektów.

  1. Wybierz maksymalnie dwa lub trzy kolory podstawowe dla swojego projektu.

Co się stanie, jeśli zmienisz czerwoną bazę na stronie The First Twenty (powyżej) na limonkową? Czy będzie dobrze wyglądać? Prawdopodobnie nie. Ponieważ nie należy do tej samej palety kolorów (i oczywiście kolor limonkowy nie jest najłatwiejszym kolorem do pracy). Strony internetowe takie jak ColourLovers istnieją bez powodu. Nie możesz po prostu wybrać kolorów w stylu Rambo, płonących pistoletów. Niektóre kolory idą w parze, inne nie. Istnieje wiele teorii dotyczących kolorów i ich kombinacji, w tym konwencje dotyczące schematów monochromatycznych i kontrastowych, ale wiele sprowadza się do zdrowego rozsądku i wyczucia.

Przekonaj się, co działa razem. Aby uzyskać informacje o tym, jak kolory współdziałają ze sobą, skorzystaj z jak największej liczby projektów stron internetowych, takich jak te, które znajdują się na wielu stronach internetowych CSS (takich jak Best Web Gallery). Wybierz maksymalnie dwa lub trzy kolory podstawowe dla swojego projektu, a następnie użyj odcieni (które są jaśniejsze, zmieszane z bielą) i odcieni (które są ciemniejsze, zmieszane z czernią) tych kolorów podstawowych, aby rozszerzyć paletę tam, gdzie to konieczne.

Wybór ładnych kolorów jest równie ważny jak dobór odpowiednich kolorów (czyli odpowiednich kolorów do pracy). Projekt strony internetowej dla przytulnej małej restauracji dobrze pasowałby do „ziemistych” tonów: czerwieni, brązu itp. Oczywiście nie ma czegoś takiego jak pewny przepis. Każdy kolor wysyła wiadomość, a od Ciebie zależy, czy otrzymasz odpowiedni komunikat.

Strona internetowa Bence Kucsan ma własny styl kolorów. Jest głównie monochromatyczny (odcienie i odcienie jednego koloru) i achromatyczny (czarno-biały) z kolorem (czerwony), aby wyróżnić się:

Czarno-biały nadaje szykowny i profesjonalny wygląd, a czerwony dodaje pikanterii, która sprawia, że ​​niektóre elementy wyróżniają się i sprawiają, że projekt nie jest nudny; Oczywiście więcej niż tylko czerwony sprawia, że ​​ten projekt jest interesujący. Nawiasem mówiąc, jedna firma szczególnie upowszechniła ten styl.

Mówiąc o kolorze, WebDesigner Wall autorstwa Nicka La to czysta błogość:

Wszystkie te miękkie pastele nadają temu projektowi blask. Na pierwszy rzut oka wybory kolorów mogą wyglądać nieco arbitralnie, ale gdy przyjrzysz się bliżej, zauważysz ściśle określoną paletę kolorów, która jest niezbędna, aby zapewnić, że wszystkie elementy dobrze się dogadują. Witryna, a zwłaszcza jej tło, demonstrują również dobre połączenie kolorów i grafiki, co prowadzi nas do czwartego…

  1. Staraj się, aby grafika dobrze się układała.

Dobra, świetny projekt nie wymaga fantazyjnych grafik. Ale słaba grafika z pewnością zaszkodzi projektowi. Grafika dodaje do wiadomości wizualnej. Strony internetowe takie jak WebDesigner Wall mają imponujące ilustracje, podczas gdy inne są zaniżone.

Tim van Damme używa tylko garstki grafik na swojej stronie Max Voltar, ale wdraża je z największą uwagą i troską. Nieinwazyjny obraz tła i wyrafinowana korona to dwie grafiki. Wizualnie, nie są zbyt imponujące, ale wszystkie dodają wyglądu i stylu strony, a nigdzie nie jest na miejscu.

Od pewnego czasu Max Voltar ma inną konstrukcję niż ta pokazana powyżej. Ale przez dwa miesiące, kiedy ten był online, był to z pewnością jeden z moich ulubionych. Z tego powodu, a ponieważ korzystanie z grafiki jest tak wzorowe, wybrałem ją w najnowszej wersji.

Komodo Media Rogiego Kinga jest dużo bardziej ciężka pod względem graficznym, doskonale wykonana zarówno z technicznego, jak i tematycznego punktu widzenia.

Być może nie jesteś świetnym ilustratorem lub fotografem, ale to nie znaczy, że nie możesz umieścić wspaniałej grafiki na swojej stronie. Potrzebne są podstawowe umiejętności Photoshopa, ewentualnie niektóre zdjęcia i świetny smak. Postaraj się, aby grafika dobrze do siebie pasowała i upewnij się, że odzwierciedlają styl, do którego dążysz. Jednak nie wszyscy jesteśmy obdarzeni tą samą naturalną zdolnością. Możesz nauczyć się czegoś od innych, ale czasami musisz wybrać styl, który najbardziej Ci odpowiada (np. Czysty styl, jeśli nie jesteś najlepszym z ilustratorów).

  1. Popraw typografię swojej witryny.

Sztuka typu jest trudnym tematem do omówienia, ponieważ obejmuje tak wiele elementów. Choć można go uznać za gałąź wzornictwa, można spędzić całe życie opanowując wszystkie jego aspekty. Nie jest to miejsce, w którym można podać pełną referencję typograficzną, więc ograniczymy naszą dyskusję do tego, co przyniesie Ci korzyści w krótkim okresie.

Typografia internetowa jest niepełnosprawna w porównaniu z typografią drukowaną. Największą różnicą jest brak pełnej kontroli nad wyglądem typu w sieci ze względu na jego dynamiczny charakter. Oczywiście dynamiczne renderowanie ma swoje mocne strony, ale projektanci stron internetowych mają niewielką kontrolę nad wynikami, przynajmniej na razie. Brakujące czcionki na komputerze użytkownika, różnice w renderowaniu przeglądarki i platformy oraz ogólnie słabe wsparcie w CSS sprawiają, że typografia w sieci jest trudnym, a nawet frustrującym zadaniem. Ale choć być może będziemy musieli poczekać, aż CSS 3 dla typografii internetowej osiągnie swój pełny potencjał, mamy teraz środki, aby wyglądał interesująco i, co ważniejsze, ładny.