- Utrzymuj równowagę projektu.
Równowaga polega na tym, aby Twój projekt nie przechylał się na jedną lub drugą stronę. To jest jak równowaga ciężaru w osiągnięciu symetrii lub asymetrii.
Jeśli nie będziesz ostrożny, jak to rozplanować, projekt się nie wyrówna. Możesz manipulować wizualną wagą projektu na wiele sposobów, na przykład za pomocą koloru, rozmiaru oraz dodawania lub usuwania elementów. Gdyby zrobić krzyż, powiedzmy, żywą pomarańczę, stałby się cięższy i być może wytrąciłby układ z równowagi. Osiągnięcie asymetrycznej równowagi jest szczególnie delikatną sprawą, która wymaga czasu na dostrojenie, i nieco wytrenowanego oka, aby naprawdę się oderwać. Przekonasz się, że każdy projekt, który Twoim zdaniem wygląda dobrze, ma dobrze skonstruowaną równowagę.
- Podziel projekt na segmenty za pomocą siatek.
Pojęcie sieci jest ściśle powiązane z pojęciem równowagi. Siatki to seria poziomych i pionowych linijek, które pomagają „przedziałować” projekt. Pomyśl o kolumnach. Kolumny poprawiają czytelność, ułatwiając wchłanianie zawartości strony. Odstępy i użycie reguły trzeciej (lub podobnego złotego współczynnika) sprawiają, że wszystko jest łatwiejsze dla oka.
Zasada Trzeca i Złoty współczynnik wyjaśniają, dlaczego na przykład paski boczne mają zwykle około jednej trzeciej szerokości strony i dlaczego główny obszar zawartości jest w przybliżeniu równy szerokości projektu podzielonej przez 1,62. Nie dowiemy się, dlaczego tak jest, ale wydaje się, że tak jest w praktyce. Z tego też powodu obiekt na profesjonalnie wykonanych fotografiach jest zwykle umieszczony nie pośrodku, ale na przecięciu wyimaginowanej siatki dziewięciu kwadratów (trzy na trzy, z dwiema poziomymi i dwoma pionowymi liniami).
- Wybierz maksymalnie dwa lub trzy kolory podstawowe dla swojego projektu.
Dowiedz się, co razem działa. Zanurz jak najwięcej projektów stron internetowych, takich jak te prezentowane na wielu witrynach CSS, aby poczuć, jak kolory współdziałają ze sobą. Wybierz maksymalnie dwa lub trzy kolory podstawowe dla swojego projektu, a następnie użyj odcieni (które są jaśniejsze, zmieszane z białym) i odcieni (które są ciemniejsze, zmieszane z czarnym) tych kolorów podstawowych, aby w razie potrzeby rozszerzyć paletę.
Wybór ładnych kolorów jest tak samo ważny, jak wybranie odpowiednich kolorów (to znaczy odpowiednich kolorów do pracy). Projekt strony internetowej dla przytulnej małej restauracji przydałby się z „ziemistymi” tonami: czerwieniami, brązami itp. Oczywiście nie ma czegoś takiego jak przepis na pewno. Każdy kolor wysyła wiadomość i od Ciebie zależy, czy dobrze ją wyślesz.
Czarno-biały przekazuje elegancki i profesjonalny, a czerwony dodaje przyprawy, która wyróżnia niektóre elementy i sprawia, że projekt nie wygląda nudno; oczywiście więcej niż czerwony sprawia, że ten projekt jest interesujący. Nawiasem mówiąc, jedna firma szczególnie spopularyzowała ten styl.
- Postaraj się, aby grafika dobrze do siebie pasowała.
Dobry, świetny design nie wymaga fantazyjnej grafiki. Ale słaba grafika z pewnością zaszkodzi projektowi. Grafika dodaje się do komunikatu wizualnego.
Być może nie jesteś świetnym ilustratorem ani fotografem, ale to nie znaczy, że nie możesz umieścić świetnej grafiki na swojej stronie. Wystarczy podstawowa umiejętność Photoshopa, być może zdjęcia stockowe i świetny smak. Postaraj się, aby grafika dobrze do siebie pasowała i upewnij się, że ucieleśnia styl, którego szukasz. Jednak nie wszyscy mamy taką samą naturalną zdolność. Możesz wybierać niektóre rzeczy, ucząc się od innych, ale czasami musisz po prostu wybrać styl, który najbardziej Ci odpowiada (jak czysty styl, jeśli nie jesteś najlepszym ilustratorem).
- Popraw typografię swojej witryny.
Sztuka pisania jest trudnym tematem do rozmowy, ponieważ obejmuje tak wiele elementów. Chociaż można go uznać za gałąź projektowania, można poświęcić całe życie na opanowanie wszystkich jego aspektów. To nie jest miejsce, aby podać pełne odniesienie typograficzne, dlatego ograniczymy naszą dyskusję do tego, co przyniesie korzyści w krótkim okresie.
Typografia internetowa jest upośledzona w porównaniu do typografii drukowanej. Największą różnicą jest brak pełnej kontroli nad wyglądem tekstu w sieci ze względu na jego dynamiczny charakter. Oczywiście dynamiczne renderowanie ma swoje zalety. Brak czcionek na komputerze użytkownika, różnice w renderowaniu przeglądarki i platformy oraz ogólnie słaba obsługa CSS sprawiają, że typografia internetowa jest zniechęcającym, jeśli nie frustrującym zadaniem. Ale chociaż możemy poczekać, aż CSS 3 osiągnie pełen potencjał typografii internetowej, mamy teraz środki, aby wyglądać interesująco i, co ważniejsze, ładnie.
Co z zastąpieniem obrazu (technika zamiany czcionek na obrazy)? Rozmawialiśmy o stosach czcionek, ale czy nie są gorsze od zastępowania obrazów? Zależy to od tego, co według Ciebie jest ważniejsze: możliwości wyświetlenia dokładnie takiej czcionki, jakiej oczekujesz, czy posiadania dynamicznych, dostępnych i przyjaznych SEO treści? Niektóre techniki zastępowania obrazów stały się dość zaawansowane, ale nadal nie są tak elastyczne jak zwykły tekst. Zastępowanie obrazów dobrze nadaje się do nagłówków i fragmentów, ale nie jest to rozwiązanie dla tekstu podstawowego.
- Wyróżnij elementy, dodając wokół nich białą przestrzeń.
Biała przestrzeń lub negatywna ma związek z tym, czego nie ma. Podobnie jak miara i wiodąca, biała przestrzeń dają tekstowi trochę oddechu i spokoju przestrzennego. Możesz wyróżnić elementy, dodając wokół nich białą przestrzeń. Na przykład kopia nie powinna wyglądać na ciasną. Aby zapewnić czytelność, upewnij się, że akapity mają wystarczające wypełnienie.
Reklamy perfum – lub jakakolwiek reklama luksusowego produktu w tym zakresie – są znane z tego, że wykorzystują białe znaki… mnóstwo tego; i krój pisma szeryfowego dla lepszej miary.
Biała przestrzeń dodaje projektowi wiele klasy. Nie bój się zostawiać niektórych dziur otwartych, nawet tych ziejących. Niedoświadczeni projektanci kuszą się, aby umieścić coś w każdym zakątku. Projekt polega na przekazywaniu wiadomości. Elementy projektu powinny zatem obsługiwać ten komunikat, a nie powodować hałasu.
- Połącz wszystkie elementy.
„Połączenie” jest tutaj trochę wymyślonym terminem, ale wydaje się być najlepsze z tego, co mamy na myśli. Połączenie tutaj odnosi się do projektu sieci, który ma zarówno jedność, jak i spójność. Te dwa atrybuty świadczą o profesjonalizmie projektu (a tym samym jego projektanta). Są to bardzo szerokie atrybuty. Projekt powinien być spójny pod względem wykorzystania kolorów, zakresu czcionek, ikon itp. Wszystkie te aspekty się liczą; projekt może wyglądać świetnie i nadal cierpieć z powodu niespójności.
Gdy projekt jest niespójny, jego jedność może zostać utracona przez użytkownika. Jedność różni się nieco od spójności. Jedność odnosi się do tego, jak różne elementy w projekcie oddziałują na siebie i pasują do siebie. Na przykład czy kolory i grafika pasują do siebie? Czy wszystko przyczynia się do jednego zunifikowanego przesłania? Z drugiej strony spójność występuje między stronami projektu.
Spośród siedmiu zasad omówionych w tym artykule najważniejsze jest połączenie. Połączenie ma związek ze sposobem, w jaki łączą się wszystkie elementy: równowaga, siatka, kolory, grafika, typ i biała przestrzeń. Jest to rodzaj kleju, który łączy wszystko razem. Bez tego kleju konstrukcja rozpada się. Możesz mieć ładny typ i genialną i starannie dobraną paletę kolorów, ale jeśli grafika jest okropna lub po prostu nie pasuje, lub jeśli wszystko jest stłoczone bez zastanowienia, projekt się nie powiedzie.
To najtrudniejsza część projektowania. Nie jest to coś, czego można się łatwo nauczyć lub koniecznie nauczyć. Wymagana jest trochę naturalna zdolność i doświadczenie. Ale tak właśnie jest i ostatecznie sprawia, że projekt wygląda dobrze.
Oceń naszą pracę 🙂
