Çizgilerle Tasarım İçin 6 İpucu

Bugün mümkün olan en basit tasarım öğelerinden birine bakacağız: bir çizgi. Hatları düzgün bir şekilde nasıl kullanacağınızı ve bunları uygularken nelerden kaçınacağınızı öğreneceğiz.

Bir tasarıma birkaç basit çizgi eklemek, sıkıcı bir tasarıma yapı ve grafiksel yetenek kazandırabilir. Etkili bir şekilde kullanıldığında, tasarımınızı bitirmek için bir katman ekleme etkisine sahip olan ölü bir basit numara.

Envato Elements'i keşfedin

# 1: Alt Çizgi Kullan

Tipografi oyun kitabındaki en temel numarayla başlayacağız: bir alt çizgi. Altı çizili bir başlık daha ağırdır ve başlık ile gövde arasında daha belirgin bir ayrım sağlar. Bunların mutlaka olumlu veya olumsuz özellikler olduğunu, ancak daha tarafsız olduklarını unutmayın; gittiğiniz görünüme bağlı olarak varlıklarının ne zaman iyi veya kötü olduğuna karar vermelisiniz.

Çizginin sadece iki eleman arasında bir ayırıcı olarak nasıl hareket ettiğine değil, aynı zamanda sütunun genişliğinin tanımlanmasına yardımcı olduğuna dikkat edin.

Bana alt çizgi ile hata yapan bir şey, satıra çöken bir alçaltıcı içeren harfler olduğunda oluşan görsel karışıklıktır. Buna karşı resmi bir kural yok ama sadece biraz rahatsız edici olduğunu ve izleyicinin ilgisini tüm yanlış yerlere yönlendirdiğini görüyorum.

Peki bu sorunu nasıl ele alacağız? En kolay seçenek, sadece iniş ve alt çizgileri birlikte kullanmaktan kaçınmaktır, ancak bu benim zevkim için biraz fazla kısıtlayıcı. Bunun yerine, genellikle yaptığım şey, bir çizgi çizerek (alt çizgi düğmesine tıklamak yerine) alt çizgiyi manuel olarak oluşturmak, ardından çizginin iniş çıkışlarıma düşen kısımlarını maskelemek.

Yukarıdaki örnekte de görebileceğiniz gibi, bu önceki örnekten çok daha güzel ve çok daha az görsel karmaşıklık içeriyor. Son “g” den sonra bu çok telli çizgiyi sevmiyorsanız, alt çizgiyi son descender'da durdurabilirsiniz (yalnızca son harfin bir descender içerdiği durumlarda geçerlidir).

Uzat

Bir alt çizginin metnin genişliğine uyması gerekmediğini unutmayın. Bazen alt çizgiyi sayfa boyunca veya sayfa dışına kadar genişletmek ilginç bir açıklama yapar.

Alt çizgiyi genişletirseniz, negatif alandaki çizgi ile eğlenmenin yollarını düşünün. Biraz türbülans verebilir, bir şekle bükebilirsin, istediğin her şeyi!

Aşağıdaki tasarımcı genişletilmiş alt çizgiyi sonlandırdı ve bir nokta ile sonuçlandı. Bu, sağdaki herhangi bir içeriğe bağlı hissetmesini sağlar ve düz çizgiye güzel ama ince bir ilgi ekler.

# 2: Çizgiyi Kes

Her zaman düz bir çizgi çizme tuzağına düşmeyin. Çizgileri, noktaları, üçgenleri, yıldızları ve istediğiniz çizgiyi oluşturmak için aklınıza gelebilecek her şeyi kullanabilirsiniz ve yine de aynı hedefe ulaşır.

Bu tasarımcının, net bir bölüm oluşturmak için başlığın merkezine hizalanan noktalı bir keten nasıl kullandığını kontrol edin. Metin burada ortalanmış olmasına rağmen, satırlar görsel olarak başlığın görsel sınırlarını sütunun sol ve sağ kenarlarına kadar uzattığı için tasarım haklıdır.

# 3: Türü Yan Ettirin

Resmi bir tema arıyorsanız, başlığınızın üstündeki alt çizgiyi tekrarlamak eski bir stil baskı hissi yaratabilir. Bu tarzı gördüğümde hep bir gazete başlığı düşünüyorum.

Formalite hissini azaltmak istiyorsanız, çizgileri farklı şekillerde kademelendirerek daha az yapılandırılmış görünmesini sağlayın. Bu, statik bir sayfada hareket hissi yaratmak için de kullanışlı bir efekttir.

# 4: Dikey Git

Şimdiye kadar yatay çizgilere odaklandık, ancak bir tasarıma gerçekten yaratıcı bir grafik ilgi eklemek için dikey çizgiler kullanılabilir. Aşağıdaki tasarımcı, yazı tipindeki dikey çizgileri, oldukça havalı görünmesi ve sayfanın geri kalanına dayanacak güzel, uyumlu bir tema yaratması dışında gerçek bir nedenden ötürü abarttı.

Açıkçası, dikey bir çizginin biraz daha geleneksel kullanımı, iki içerik sütununu ayırmak olacaktır. Bu, tür veya resimlerle birlikte kullanılabilir ve garip bir boşluk olmadan sütunlarınız arasında çok fazla boşluk bırakmanıza olanak tanır.

# 5: Köşegenleştirin

Sayfanızın gerçekten çılgın görünmesini istiyorsanız içeriğinizi çapraz olarak eğin. Bu genellikle kuralları ihlal eden ve sınırları zorlayan genç, heyecan verici tasarımın etkileyici olmasını sağlar.

İçeriğinizi yatırmak biraz rastgele görünebilir, ancak resimdeki satırları genişletmek kasıtlı görünmesine yardımcı olur ve efekti gerçekten iter. Utangaç olmayın, gerçekten dönüşü kranklayın ve bu çizgileri bir açıklama yapacak kadar uzatın.

Çapraz etki, yukarıdaki gibi retro esintili tasarımlar için özellikle harika.

6: Kuruyemiş

İşte size bunu kolaylaştırmanızı söylemem gereken yer. Bir veya iki basit çizgi tasarımınıza çok şey katabilir ve efektle çok ileri gitmek estetik çekiciliğinizi kesinlikle öldürebilir. Bununla birlikte, doğru ellerde, yukarıdaki ipuçlarının bir kombinasyonu gerçekten keskin bir nihai ürünle sonuçlanabilir.

David Fooks'un aşağıdaki tasarımında bir ton çizgi çalışması kullanılıyor. Noktalı çizgileri, düz çizgileri, düz çizgileri, eğri çizgileri, sınırları ve hatta çizgileri, bu tek bir küçük alanın ucunda bir elmasla birleştiriyor. Genel etki dağınık veya çirkin değil, aksine oldukça şık ve güzel!

Tavsiyem sadece dikkatli olmanız. Herhangi bir tasarım öğesi gibi, çizgiler de iyi ya da kötü için kullanılabilir. Gerektiğinde kısıtlamayı kullanın ve tasarıma gerçekten değer kattığınızdan emin olmak için tasarımınıza her zaman eklenen satırlarla veya satırlar olmadan bakın.

İlham

Bir sonraki tasarımınıza bazılarını nasıl dahil edeceğiniz konusunda bazı fikirler edinmek için web tasarımındaki çizgi çizimlerinin bu harika kullanımlarına göz atın.

CarbonAds

Kayıt için

Evan Eckard

Cool ve Rehber

Ananas Hırsızı

DesignSwap

Karavan

Sonuç

Bu tartışmanın amacı, eski dostumuza ikinci kez bakmaya teşvik etmek ve tasarımlarınızı estetik, yapısal veya her ikisini de güçlendirmek için çizgileri nerede kullanabileceğinizi dikkatlice düşünmekti.

Basit çizgileri güçlü bir şekilde kullanan bir tasarımınız varsa, kontrol edebilmemiz için aşağıda bir bağlantı ile yorum bırakın! Ayrıca yukarıdaki örnekler hakkında ne düşündüğünüzü bize bildirin.

© Copyright 2024 | computer06.com