6 porad dotyczących projektowania za pomocą linii
Dzisiaj przyjrzymy się jednemu z najprostszych możliwych elementów projektu: linii. Dowiemy się, jak prawidłowo posługiwać się liniami, a także, jak unikać ich wdrażania.
Dodanie kilku prostych linii do projektu może nadać strukturze i graficznemu stylowi nudny wygląd. Jest to śmiertelnie prosta sztuczka, która przy skutecznym użyciu powoduje dodanie warstwy wykończenia twojego projektu.
Poznaj elementy Envato
# 1: Użyj podkreślenia
Zaczniemy od najbardziej podstawowej sztuczki w poradniku typografii: podkreślenia. Podkreślony nagłówek wydaje się cięższy i zapewnia bardziej wyraźne oddzielenie nagłówka od ciała. Pamiętaj, że są to koniecznie pozytywne lub negatywne atrybuty, ale są bardziej neutralne; musisz zdecydować, kiedy ich obecność jest dobra lub zła na podstawie wyglądu, którego szukasz.
Zauważ, że linia działa nie tylko jako separator między dwoma elementami, ale także pomaga zdefiniować szerokość kolumny.
Jedną z rzeczy, która mnie wkurza z podkreśleniami, jest wizualny bałagan powstały, gdy masz litery zawierające zstępujący, który rozbija się na linii. Nie ma oficjalnej reguły przeciwko temu, ale po prostu uważam, że jest to trochę zbyt rozpraszające i kieruje zainteresowanie widza do wszystkich niewłaściwych miejsc.
Jak więc rozwiązać ten problem? Najłatwiejszą opcją jest oczywiście uniknięcie jednoczesnego korzystania ze schodów i podkreśleń, ale to trochę zbyt ograniczające jak na mój gust. Zamiast tego zwykle robię podkreślenie ręcznie, rysując linię (w przeciwieństwie do zwykłego klikania przycisku podkreślenia), a następnie maskuję fragmenty linii, które wpadają na moje zejście.
Jak widać w powyższym przykładzie, jest to o wiele ładniejsze niż w poprzednim przykładzie i zawiera znacznie mniej złożoność wizualną. Jeśli nie podoba ci się ta odrobina splatanej linii po ostatnim „g”, możesz po prostu zatrzymać podkreślenie na ostatnim zstępującym (dotyczy tylko, gdy ostatnia litera zawiera zstępujące).
Rozszerz to
Pamiętaj, że podkreślenie nie musi być zgodne z szerokością tekstu. Czasami stanowi interesujące oświadczenie, aby rozszerzyć podkreślenie na całą stronę, a nawet poza nią.
Jeśli rozszerzysz podkreślenie, zastanów się, w jaki sposób możesz się dobrze bawić z linią w negatywnej przestrzeni. Możesz nadać mu trochę turbulencji, nadać mu dowolny kształt!
Poniższy projektant zakończył rozszerzone podkreślenie i zakończył kropką. To sprawia, że czuje się związany z dowolną treścią po prawej stronie i dodaje miłego, ale subtelnego zainteresowania prostej linii.
# 2: Rozbij linię
Nie wpadaj w pułapkę ciągłego rysowania linii ciągłej. Możesz użyć myślników, kropek, trójkątów, gwiazd i wszystkiego innego, co możesz wymyślić, aby utworzyć linię, którą chcesz, i nadal osiąga ten sam cel.
Sprawdź, jak ten projektant zastosował kropkowaną pościel, która wyrównuje się ze środkiem nagłówka, aby utworzyć wyraźny przekrój. Chociaż tekst jest tutaj wyśrodkowany, projekt wydaje się uzasadniony, ponieważ linie funkcjonalnie rozciągają wizualne granice nagłówka do lewej i prawej krawędzi kolumny.
# 3: Flankuj typ
Jeśli szukasz formalnego motywu, powtórzenie podkreślenia u góry nagłówka może stworzyć wrażenie wydruku w starym stylu. Zawsze widzę nagłówek gazety, kiedy widzę ten styl.
Jeśli chcesz zmniejszyć poczucie formalności, rozłóż linie na różne sposoby, aby wyglądały mniej uporządkowane. Jest to również przydatny efekt do tworzenia wrażenia ruchu na statycznej stronie.
# 4: Idź w pionie
Do tej pory koncentrowaliśmy się na liniach poziomych, ale linii pionowych można użyć do wstawienia naprawdę kreatywnego zainteresowania graficznego do projektu. Poniższy projektant wyolbrzymił pionowe linie kroju pisma bez żadnego rzeczywistego powodu poza tym, że wygląda całkiem fajnie i tworzy ładny, spójny motyw, który można wykorzystać na pozostałej części strony.
Oczywiście nieco bardziej tradycyjnym zastosowaniem linii pionowej byłoby po prostu oddzielenie dwóch kolumn treści. Można tego używać w połączeniu z typem lub obrazami, co pozwala na umieszczenie dużej przestrzeni między kolumnami bez niewygodnej przerwy.
# 5: Idź po przekątnej
Jeśli naprawdę chcesz, aby strona wyglądała na szaloną, przechyl zawartość po przekątnej. To zazwyczaj robi wrażenie na młodym, ekscytującym projekcie, który łamie zasady i przesuwa granice.
Przechylanie zawartości może wyglądać nieco losowo, ale wydłużenie linii w kompozycji pomaga wyglądać celowo i naprawdę popycha efekt. Nie wstydź się tego, naprawdę obróć obroty i rozciągnij te linie na tyle, aby wydać oświadczenie.
Efekt diagonalny jest szczególnie świetny dla projektów inspirowanych stylem retro, takich jak ten powyżej.
# 6: Go Nuts
To jest miejsce, w którym powinienem ci powiedzieć, żebyś się uspokoił. Jedna lub dwie proste linie mogą wiele dodać do twojego projektu, a przesadzenie z efektem może absolutnie zabić twój estetyczny urok. Jednak w odpowiednich rękach kombinacja powyższych wskazówek może dać naprawdę ostry produkt końcowy.
Poniższy projekt Davida Fooksa wykorzystuje mnóstwo liniowej pracy. Łączy linie kropkowane, linie ciągłe, linie proste, linie zakrzywione, granice, a nawet linie z diamentem na końcu, wszystko w jednym małym obszarze. Ogólny efekt nie jest zagracony ani brzydki, ale jest raczej elegancki i piękny!
Moja rada to po prostu zachować ostrożność. Jak każdy element projektu, linie mogą być użyte dla dobra lub zła. W razie potrzeby używaj powściągliwości i zawsze patrz na swój projekt z dodanymi liniami i bez nich, aby upewnić się, że faktycznie dodajesz wartości do projektu.
Inspiracja
Sprawdź te wspaniałe zastosowania grafiki liniowej w projektowaniu stron internetowych, aby uzyskać pomysły na włączenie ich do następnego projektu.
CarbonAds
Dla przypomnienia
Evan Eckard
Fajny i przewodnik
Złodziej ananasów
DesignSwap
Karawana
Wniosek
Celem tej dyskusji było zachęcenie cię do ponownego spojrzenia na naszego starego przyjaciela z linii i uważnego rozważenia, gdzie możesz użyć linii do wzmocnienia swoich projektów pod względem estetycznym, strukturalnym lub obu.
Jeśli masz projekt, który silnie wykorzystuje proste linie, zostaw komentarz poniżej z linkiem, abyśmy mogli go sprawdzić! Daj nam również znać, co myślisz o powyższych przykładach.
