Jeśli przeprowadziłeś się do innego kraju (gdzie nie mówią tym samym językiem co ty), jedną z pierwszych rzeczy, którą prawdopodobnie byś zrobił jest rozpoczęcie nauki języka. Możesz nawet zacząć na długo przed przeprowadzką, aby przygotować się do komunikowania się z ludźmi, których wkrótce będziesz nazywał sąsiadami.

Komunikacja jest istotną częścią życia, a jako projektanci stron internetowych robimy to przy każdym nowym projekcie.
Co się dzieje, gdy słowa nie wystarczą? Jeśli chcesz, aby ktoś spojrzał w określonym kierunku, możesz wskazać ten kierunek. Wszyscy opracowaliśmy gramatykę komunikowania się za pomocą gestów fizycznych i komunikujemy się tak samo, jeśli nie bardziej, za pomocą mowy ciała niż języka werbalnego.

Projektanci stron internetowych i grafiki komunikują się wizualnie. Na przykład wybór schematu kolorów z ciemnym niebieskim jako dominującym wysyła bardzo różny komunikat niż w przypadku, gdy dominującym kolorem jest gorący róż. Kolor jest jednym ze sposobów, w jaki komunikujemy się wizualnie. Jest to jeden z elementów składowych gramatyki wizualnej, która zazwyczaj obejmuje:

• linie
• kształty
• kolor
• tekstura
• wartość
• przestrzeń
• forma/objętość/masa

W przeszłości rozmawialiśmy o teorii kolorów i znaczeniu kolorów, a także o wykorzystaniu białych przestrzeni w projektowaniu. Dzisiaj chciałem przyjrzeć się liniom. Jakie rodzaje linii są do naszej dyspozycji? Co komunikują różne linie? Następnym razem porozmawiamy o kształtach i zadamy kilka z tych samych pytań.

Gramatyka linii

Linia to kropka na spacerze.
-Paul Klee

Linia łączy dwa punkty. Jest to również droga, którą pokonuje poruszający się punkt. Linie mogą być grube lub cienkie. Mogą być długie lub krótkie. Mogą być pionowe, poziome lub ukośne. Mogą być pełne, kropkowane lub przerywane. Linie mogą być zakrzywione lub proste z kombinacji obu. Istnieje nieskończona różnorodność w tym, co uważamy za linię.

Linie mogą być dosłowne lub dorozumiane. Narysuj serię 3, 4 lub 5 punktów, a twój umysł wypełni linię między nimi.

Każdy z różnych sposobów, w jaki rysujemy lub reprezentujemy linię, nadaje jej unikalne cechy. Grube linie przekazują inne znaczenie niż cienkie linie. Zakrzywione linie wysyłają inną wiadomość niż ostra linia prosta.

Typy linii

Istnieje kilka typów linii określonych przez ich zastosowanie.

• Linie konturowe są używane do definiowania krawędzi. Tworzą one granice wokół lub wewnątrz obiektu. Większość linii, z którymi się spotykasz to linie konturowe. W projektowaniu stron internetowych mogą to być granice, które dodajesz wokół obiektu lub grupy obiektów
• Linie podziału mogą również definiować krawędzie, ale to, co odróżnia je od linii konturu, to fakt, że dzielą one przestrzeń. Linie między kolumnami tekstu są liniami podziału, podobnie jak linie oddzielające pozycje menu.
• Linie dekoracji są używane do upiększania obiektu. Cross-hatching jest przykładem użycia linii dekoracji, aby dodać cieniowanie i formę do obiektu. Linia pod lubianym tekstem jest linią dekoracyjną, podobnie jak linie używane do tworzenia tła kwiatowego
• Linie gestów są szybkimi i szorstkimi liniami ciągłymi używanymi do uchwycenia formy i ruchu. Są one zazwyczaj używane podczas badania kształtu i ruchu ludzkiej postaci. Prawdopodobnie nie będziesz używał linii gestów (w oparciu o definicję techniczną) w projekcie strony internetowej, ale z pewnością możesz tworzyć wzory linii, aby oznaczać ruch lub budować formę

Znaczenie różnych rodzajów linii

Jak wspomniałem powyżej, istnieje wiele różnych sposobów, na jakie możemy opisać daną linię i każdy z nich nadaje linii unikalne cechy. Co te cechy oznaczają i co komunikują? (.doc)

Linie cienkie są kruche. Wydają się łatwe do złamania lub przewrócenia. Sugerują kruchość i przekazują elegancką jakość. Są delikatne i dają efemeryczne powietrze.

Grube linie z drugiej strony wydają się trudne do złamania. Sugerują one siłę i dają nacisk na pobliskie elementy. Grube linie są śmiałe i sprawiają, że statement.

Linie poziome są równoległe do horyzontu (stąd nazwa). Wyglądają jakby leżały, odpoczywały, spały. Sugerują spokój i ciszę, zrelaksowany komfort.

Linie poziome nie mogą się przewrócić. Podkreślają szerokość. Są stabilne i bezpieczne. Przekazują one brak konfliktu, spokojny spokój. Linie poziome przez ich połączenie z horyzontem są związane z ziemi rzeczy związane i idea.

Pionowe linie są prostopadłe do horyzontu. Są one wypełnione energią potencjalną, która może być zwolniony, jeśli były one do upadku. Linie pionowe są silne i sztywne. Mogą sugerować stabilność, zwłaszcza gdy są grubsze. Linie pionowe podkreślają wysokość i przekazać brak ruchu, który jest zwykle postrzegane jako horizontal.

Są one rozciągnąć od ziemi do nieba i są często związane z uczuciami religijnymi. Ich wysokość i formalność może sprawiać wrażenie dostojeństwa.

Linie diagonalne są niezrównoważone. Są one wypełnione niespokojną i niekontrolowaną energią. Mogą sprawiać wrażenie wznoszących się lub opadających i przekazywać działanie i ruch. Ich kinetyczna energia i pozorny ruch tworzą napięcie i podniecenie. Ukośne linie są bardziej dramatyczne niż albo poziome lub pionowe lines.

Diagonalne linie mogą również wydawać się stałe i nieruchome, jeśli są one trzymając coś w górę lub w spoczynku przed pionową linią lub plane.

Krzywe linie są bardziej miękkie niż linie proste. Omiatają i obracają się z gracją pomiędzy punktami końcowymi. Są mniej definitywne i przewidywalne niż linie proste. Wyginają się, zmieniają kierunek. Linie zakrzywione wyrażają płynny ruch. Mogą być spokojne lub dynamiczne, w zależności od tego, jak bardzo są zakrzywione. Im mniej aktywna krzywa, tym spokojniejsze uczucie.

Linie Zygzakowate są kombinacją ukośnych linii, które łączą się w punktach. Biorą na dynamiczne i wysokiej energii cechy linii ukośnych. Tworzą podniecenie i intensywny ruch. Przekazują zamieszanie i nerwowość, ponieważ zmieniają kierunek szybko i często. Mogą sugerować niebezpieczeństwo i zniszczenie, ponieważ się załamują.

Długie, idealnie równe linie wydają się sztuczne. Natura nie jest idealnie prosta. Gdy do linii dodaje się zróżnicowanie, staje się ona mniej sztuczna i bardziej naturalna.

Linie przerywane i kropkowane są liniami domniemanymi. Są one niekompletne i pozwalają obiektom przechodzić przez nie. Gruba, pionowa kropkowana lub przerywana linia jest nadal silną linią, choć nie tak silną, jak linia całkowicie lita.

Wzory linii

Seria linii tworzy wzór. Te wzory linii przekazują znaczenie oprócz znaczenia poszczególnych linii.

Linie równoległe o jednolitej szerokości i odstępach tworzą statyczny i uporządkowany efekt. Nie ma znaczenia, czy linie są poziome, pionowe czy ukośne. Nawet w liniach zakrzywionych powtórzenie tworzy porządek, jednak bardziej dynamiczny niż linie proste. Nie zbyt jak seria zakrzywionych linii podczas gdy głównie statyczne, nadal tworzy poczucie ruchu.

Poprzez zróżnicowanie odstępów między liniami o równej grubości możemy przekazać ruch. Gdy odstępy między liniami o tej samej grubości są przypadkowe, uzyskujemy dynamiczny efekt z niewielkim uporządkowaniem. Kiedy zmieniamy zarówno odstępy jak i grubość, efekt staje się bardziej chaotyczny i nieuporządkowany.

Wzory linii mogą być budowane w celu stworzenia cieniowania i tekstury. Wartość może być kontrolowana poprzez użycie linii. Linie mogą być łączone, aby tworzyć kształty. Linie mogą składać się z czcionki lub dowolnego kształtu umieszczonego jedna za drugą.

Jak używać linii w projektowaniu stron internetowych

Używamy linii do organizowania, łączenia i oddzielania informacji i elementów projektu. Możesz użyć linii, aby przekazać ruch i stworzyć teksturę. Linie zapewniają podkreślenie i definiują kształt. Mogą być używane do przekazywania nastroju i emocji.

Pomyśl o dowolnej stronie internetowej i wszystkich miejscach, w których linie są lub mogłyby być użyte. Kiedy wyrównujesz elementy projektu, tworzysz implikowaną linię, która porządkuje i łączy te elementy. Możesz dodatkowo podkreślić tę relację prawdziwą linią.

Dodajesz obramowania wokół różnych elementów w projekcie, aby je pogrupować i wyraźnie oddzielić od innych elementów na stronie.

Linie są używane do oddzielania nagłówka od treści i treści od stopki. Służą do dzielenia strony na kolumny i rzędy informacji. Linie siatki mogą być nawet strukturalnym klejem trzymającym cały projekt razem.

Projektowanie to kontrolowanie przestrzeni, a linie są często używane do definiowania tej przestrzeni. Możemy używać linii rzeczywistych lub domniemanych w połączeniu z zasadami gestalt: ciągłości, jednolitego połączenia, bliskości, równoległości, wspólnego regionu, a nawet zamknięcia.

Podsumowanie

Linie są istotnym elementem naszego słownictwa wizualnego. W połączeniu z kształtami, kolorem, wartością, fakturą, przestrzenią i formą dają nam wizualną gramatykę, którą możemy wykorzystać do komunikacji.

Wydają się proste. Nie potrzebowałeś, żebym ci powiedział, czym jest linia, kiedy zacząłeś czytać ten wpis, a jednak jesteśmy tu jakieś 2000 słów później i ledwie zarysowaliśmy powierzchnię tego, co linie mogą zrobić. Gdybyśmy chcieli, linie mogłyby stworzyć powierzchnię i reprezentować rysy.

Coś tak prostego jak linia może mieć nieskończoną kombinację lub różnorodność i poprzez tę różnorodność przekazywać różne znaczenia, koncepcje, tematy.

Jeszcze więcej, kiedy łączymy linie we wzory, możemy przekazać dodatkowe informacje i znaczenia. Możemy używać linii do tworzenia tekstur i kształtów, co prowadzi nas do następnego postu.

Następnym razem będziemy kontynuować budowanie naszej wizualnej gramatyki z dyskusją o kształtach.

Ściągnij darmową próbkę z mojej książki, Design Fundamentals.

Pobierz darmową próbkę z mojej książki, Design Fundamentals.