Design101: Güçlü Hizalamalardan Yararlanma
Bugün tasarımdaki en temel ilkelerden birini inceleyeceğiz: hizalama. Bu aldatıcı basit konu aslında oldukça karmaşıktır ve bugün tasarımcılar arasında en belirgin eksikliklerden biridir.
Belirli hizalamaların nasıl ve ne zaman kullanılacağına dair güçlü bir kavrama sizi anında daha iyi bir tasarımcı haline getirecek ve kariyerinizin geri kalanında oluşturduğunuz her şey için temel bir yapı taşı olarak kalacaktır.
Envato Elements'i keşfedin
Hizalamaya Giriş
Birçoğu için, uyum tartışması keyfi bir alıştırma gibi gelebilir. Bu tür temel tasarım teorisi elbette sadece hayatlarında hiçbir şey tasarlamayan bireyler içindir, bu tür siteleri sık sık kullanan meslek topluluğu için değildir. Sağ?
Ben de bu tür tartışmanın yeni başlayanlar için olduğu iddiasıyla görsel hizalamayı sağlam bir şekilde kavramanın tüm tasarım türleri için rakipsiz bir temel olduğunu belirterim. Bir kez kavradığınızda, tasarımcı olarak oluşturduğunuz her bir düzende kullanacağınız bilgi türüdür.
Bununla birlikte, bu kavramların tasarımcı olarak yaptığımızın tam merkezinde olduğu düşüncesine rağmen, hizalama bugün web'de gördüğüm kötü tasarımın çoğunun birincil kaynağı gibi görünüyor.
Kendi kendine eğitilmiş tasarımcılar genellikle hizalamaların nasıl kullanılacağına dair sezgisel bir kavrayışa sahiptir, ancak bu, onu yedeklemek için açık bilgi olmadan başarısız olabilir ve başarısız olur.
Astar şeyler
Hizalamanın temel fikri zihinsel olarak basittir: şeyleri sıralamak. Tamamen farklı bir konu olan organik tasarımın dışında, bir sayfaya yerleştirdiğiniz her öğeye, konumlandırmasıyla ilgili mantıklı bir düşünme süreci eşlik etmelidir.
Yine, bu temel şeyler değil mi? Herkes bunu zaten yapıyor ... değil mi? Yanlış. Yakın zamanda CSS galerimize gönderilen aşağıdaki siteyi düşünün. Bunu cesur bir örnek olarak değil, bir öğretim aracı olarak kullanıyorum. Tasarımcı sadece başlıyor harika bir adam. Her gün becerilerini geliştiriyor ve öğrenmeye hevesli.
Bu örnek son derece tipiktir ve galeri sunumlarımızda her gün gördüğümüz şeydir. Buradaki estetik değer kötü değil. Parlak renkler ve ilginç dokular dikkatinizi çekiyor. Ancak, buradaki hizalama işareti gerçekten kaçırdı.
Buradaki problemler birçok insanın fark etmesi zor olabilir. Bu nedenle, temel şekilleri incelemek için her zaman bir tasarımı basitleştirmenizi öneririm. Bunu tasarım üzerine yazdığım bazı makalelerde yaptığımı göreceksiniz ve kesinlikle kendi tasarımlarınızdan birkaçını denemelisiniz.
Grafiksel nesneleri basitleştirilmiş bir durumda gördüğümüze göre, işgal ettikleri alan hacmini daha iyi analiz edebilir ve herhangi bir hizalama sorununu çözebiliriz.
Sayfadaki öğelerin aniden dağılmış gibi olduğuna dikkat edin. Alttaki ana içerik alanı ya sol üstteki asılı afişle ya da sağ üstteki dağınık öğelerle hizalanmıyor. Dahası, Facebook logosu küçük ve kendi başına kapalı görünüyor ve başlık, gezinti kenarından uzaklaşıyor ve içerik kenarından uzaklaşıyor.
Her ne kadar bu tasarım onu hissettiğimizde oldukça iyi görünse de, şimdi çok fazla yeniden yapılandırma kullanabileceğini görüyoruz. Burada ele almanız gereken iki anahtar şey vardır: Hizalama ve negatif boşluk.
Bu kavramlar birbirine çok yakından bağlıdır. Negatif alanla çalışmak, boşluklara odaklanmak ve temel simetri uygulamakla çok ilgilidir. Negatif alanla ilgili uygun eylem tarzı hakkında daha fazla bilgi için Altı Revizyonda Negatif Alan Kılavuzunu okuyun.
Bu makalede, karmaşık mizanpajlarda aşina olduğunuz temel hizalamaları nasıl kullanacağınıza daha fazla odaklanarak devam edeceğiz.
Merkez Hizalama
Ortalanmış mizanpajlar, tasarımcılar hariç, gezegendeki hemen hemen herkes için seçim yöntemidir. Herhangi bir nedenden ötürü, öğeleri sayfada ortalamak, yapmanız gerekenler gibi görünür. Kuşkusuz bir tasarımcının temel işi sadece eşyaları ortalamaktır!
Birkaç yıl önce kodlamak için bir geliştiriciye oluşturduğum bir tasarımı dağıttığımda bu problemle karşılaştım. Bana bitmiş versiyonu gösterdiğinde, her şey soldan ortaya hizalandı! Basitçe her şeyi her zaman merkeze göre hizalamayı tercih ettiğini açıkladı.
Gerçek şu ki, her öğeyi ortalamak yapabileceğiniz en zayıf hizalama seçimidir.
Takip edilecek sert kenarlar yoktur, bu nedenle gözleriniz hem genel düzeni almak hem de belirli içeriği emmek için çok daha fazla iş yapmak zorundadır.
Ne Zaman Kullanılır
Bu, merkez hizalamalarından daima kaçınılması gerektiği anlamına gelmez. Kendimi bu site için demolarda kullandım. Anahtar, bunları ne zaman kullanacağınızı bilmektir.
Ortaya hizalama için mümkün olan en iyi senaryonun bir sayfada çok az şey olduğunu görüyorum. Yerleşim ne kadar karmaşıksa, merkez hizalamaları o kadar az çalışır. Belirli bir sayfada çok fazla şey yoksa, orta hizalamalar güçlü bir ifade verebilir.
Sola Hizalama
Sol hizalamalar, tartışmasız sıkıcı olsa da, kaya gibi sağlamdır ve yaptığınız işlerin çoğu için varsayılan, gitmeli hizalama olmalıdır.
İçeriği sola hizalı bir şekilde organize etmeye alışkınız. Bir kitap veya gazete açın, bir sürü sola hizalama bulacaksınız. İstenmeyen postanızdaki reklamlara tekrar göz atın, birçok sola hizalayın. Onları Facebook, Google arama sonuçları, Twitter akışları ve diğer tüm büyük web sitelerinde göreceksiniz.
Sol hizalamalar dünyayı veya en azından soldan sağa okunan toplumları yönetir. Her şey için tamamen sol bir hizalamaya güvenmemelisiniz, sadece bunun güvenli yol olduğunu bilin.
Ne Zaman Kullanılır
Her türlü durumda kullanın, ancak özellikle çok fazla metin olduğunda. Şimdi okuduğunuz sayfaya bir göz atın. Eğer bu merkeze hizalanmış olsaydı bir kabus olurdu.
Özellikle web üzerinde, bir şeyi sola hizalamanın onu ortalayamayacağınız anlamına gelmediğini unutmayın. Örneğin, bir HTML div genellikle bir dizi sola hizalanmış paragraf ve resim içerir, ancak daha sonra CSS kullanılarak sayfada ortalanır.
Doğru Hizalama
Doğru hizalamalar muhtemelen en nadir olanıdır. Soldan sağa okuduğumuzdan, bir şeyin sağ kenara yapışması garip geliyor.
Bununla birlikte, tasarımlarınızda, özellikle baskıda iyice kullanılabilen mükemmel bir hizalamadır (çevrimiçi olarak daha da beklenmedik olma eğilimindedir).
Ne Zaman Kullanılır
Çoğu zaman, her zaman olmasa da, doğru bir hizalama benzersizlik hissi verecektir. Öne çıkması ve farklı hissetmesi gereken bir şey tasarlıyorsanız, doğru bir hizalama başlamak için harika bir yerdir.
Web'deki Hizalamaları Gerekçelendirme
Dışarıda bıraktığımız uyum açıkça haklı. Bu, bir sitenin tamamını kavramsal bir öğe olarak bağladığınızda güçlü bir şekilde devreye girer.
Web için tasarımla ilgili ilginç olan şey, çoğu zaman bir hizalama karışımı içermesidir. Muhtemelen tasarımcıların asla hizalamaları karıştırmamalarını duyduğunu duydunuz, ancak bu tavsiye gerçek dünyada işe yaramıyor.
Bunun yerine, hem bir sayfadaki öğeler hem de bir bütün olarak sayfa öğeleri için karar vermeniz gerekir. Bir sitenin hizalamasını bir bütün olarak görüntüleme örneğine bakarak bu tartışmaya nasıl başladığımı fark ettim, ancak daha sonra tek tek öğe hizalamalarını tartışmaya devam ettim.
Sayfanızdaki metin ve resimler için bir hizalamaya karar verdikten sonra, hepsini bir araya getirmek genellikle sayfadaki her şeyi haklı bir hizalamaya atmayı içerir. Düzensiz bir kenara sahip olmanıza rağmen, her şeyi haklı çıkarmak, orijinal örnekte eksik olan son rötuş dokunuşunu ekleyebilir.
Yukarıdaki sitede nasıl güçlü bir sol hizalama olduğuna dikkat edin, ancak sağ taraftaki her şey de uyumlu bir haklı görünüm oluşturmak için sıraya dizildi. Küçük giriş düğmesi, takvim simgesinin sağ tarafıyla hizalanan tarayıcı resimleriyle aynı çizgide.
Bu temiz, profesyonel bir tasarım. Tüm projeler için uygun olmayabilir, ancak tasarımcılara sık sık ulaşmaya ve başarısız olmaya çalıştığını görebiliyorum ve olası nedenlerden bazılarını ele almak istedim.
Şebeke sistemlerinin bu kadar popüler olmasının nedenlerinden biri de budur. Her şeyi bir ızgaraya atmak, hizalamalarınızın sağlam ve takip edilmesinin kolay olmasını sağlar.
Sonuç
Özetlemek gerekirse, gözünüzün bilgi akışını takip etmesini kolaylaştıran güçlü hizalamalar kullanın. Merkez hizalamaları kabul edilebilir, ancak sayfadaki içerik arttıkça doğru şekilde uygulanması zorlaşır.
Hizalamanın, sayfadaki belirli öğelere ve nesnelerin bir bütün olarak düzenlenmesine atıfta bulunduğunu unutmayın. Tüm öğelerinizin sayfadaki her şeye uygun şekilde hizalandığından emin olmak için her tasarıma zaman ayırın. Bu, tasarımın tüm kenarları boyunca dikey ve yatay olarak uygulanır.
