Web Tasarım Tarzı Kılavuzu Nasıl Yapılır
Bir web sitesi tasarlamak zor bir süreç olabilir. Estetikte ve aynı zamanda işlevsel hoş bir tasarım için ilham bulmak her zaman kolay değildir. Çeşitli özelliklerde ve web sayfalarında tutarlı bir stil korumak her şeyi daha zor hale getirebilir. Bu, özellikle sitenin piyasaya sürülmesinden sonra, bunu yapan bazı takımların olabileceği zaman geçerlidir. Bu noktada, bir web tasarım stili kılavuzu çok yararlı olabilir. Web Tasarım Stili Kılavuzu nedir? Web Tasarım Stili Kılavuzu Her Web Sitesi öğesinin tasarımını ayarlar. Stil Kılavuzu, her sayfa şablonu için tasarım kanıtı değil, tipografi, renk ve dolgu gibi daha spesifik bir bileşen yapmaktır.
Neden Stil Rehberi Yapın? Tasarım tarzı kılavuzu yapmak, web sitenizde ve sosyal medya profiliniz gibi harici mülkiyette tutarlı bir stil tutmanıza yardımcı olacaktır. Stil Rehberi, birçok takım web sitenizde çalıştığında çok kullanışlı hale gelir. Örneğin, birkaç yeni sayfa yapan bir ajansınız olabilir. Onlara stil rehberinizi vererek, yeni sayfa tasarımının web sitenizin geri kalanıyla tutarlı olmasını sağlayabilirsiniz. Tasarım Stili Kılavuzu Örnekleri Mevcut Web Tasarım Stili Kılavuzlarından bazılarına bakalım. Çekebileceğiniz çeşitli yaklaşımların yanı sıra çoğu stil yönergesine dahil edilecek bazı genel unsurların resmini alacaksınız.
İşte daha yakın göreceğimiz iki web tasarım stili kılavuzu:
Google Malzeme Tasarımı
MailChimp Desen Kütüphanesi
Malzeme tasarımlarını görünce, stil kılavuzunda yer alan aşağıdaki ana alanları görebiliriz:
Hareket
Stil (renk, simge, görüntü, tipografi, yazı dahil) düzeni
Bileşenler (düğmeler, kartlar, listeler ve sekmeler gibi)
Model
Büyüme ve İletişim
Yarar
Platform
MailChimp Desen Kütüphanesi Kılavuzu MailChimp Desen Kütüphanesi aşağıdaki alanları içerir:
Ağ sistemi
Tipografi
Form öğesi
Navigasyon
Masa
Liste
Kaburga
İstatistikler/Veriler
Giriş
Diyalog
Freddicon
Yardımcı sınıf
Her ikisi de kapsamlı stil yönergeleridir ve ikisi arasında tipografi, simgeler, düzen/kafes ve bileşenler gibi bazı genel unsurları görebiliriz.
MailChimp modelinin malzeme tasarımına ve kütüphanesine dahil olan her şeyi tartışmayacağız, ancak çoğu stil yönergesine dahil edilecek ayrıntılı önemli unsurlar. Stil rehberinize dahil edilmesi gerekenler, birkaç web tasarım stili kılavuzları ve içerdiği genel unsurlara örnek olarak gördünüz. Şimdi birkaç genel unsuru daha ayrıntılı olarak gireceğiz. 1. Tipografi tipografinin önemini hafife almaz. Bazı insanlar için, tür web sitesi tasarımının en önemli yönüdür. Stil kılavuzunuzun bu bölümünü doğru almak için yeterli zaman ayırmanız gerekir. Daha fazla tipografi öğrenmek istiyorsanız, web sitenizde metin yönetimi hakkında ne söylendiğini okuyabilirsiniz.
Web sitenizin kurallarını belirlemeye odaklanmanız gereken birkaç ana alan vardır. Şimdi her birini ayrıntılı olarak tartışacağız. Yazı Tipi Aileleri İki tür yazı tipi ailesi vardır:
‘Times New Roman’ ve ‘Courier’ gibi yazı tipi isimleri
‘Serif’ ve ‘sans-serif’ gibi jenerik yazı tipi aileleri
Bir yazı tipi ailesi seçmek gerçek bir meydan okuma olabilir, çünkü mevcut birçok farklı yazı tipi oldukça korkutucu olabilir. Bir yazı tipi seçmek, birkaç yazı tipi ailesini birleştirmeye başladıktan sonra daha büyük bir zorluktur. Neyse ki, bu konuda yardımcı olacak bazı kaynaklar var. Google yazı tipleri, bazı yazı tiplerinin ücretsiz olarak mükemmel görünmesini sağlayan araçlardır. İnterneti daha önce hiç kullanmadıysanız (bunu nasıl okursunuz?!), O zaman ‘Open Sans’ ve ‘Roboto’ gibi yazı tiplerini görmüş olmalısınız; En popüler Google yazı tipinden ikisi.
Google yazı tipi
Google yazı tipi, yazı tiplerini filtrelemeyi kolaylaştırır, ancak yazı tiplerini eşleştirmek zor olabilir, bu da başlıklar ve içerikler için farklı bir yazı tipi seçmek zor olabilir. İki Google yazı tipini birleştirmekte sorun yaşıyorsanız, Font Pair veya Fonts.GreatSimple.io gibi kaynakları kullanabilirsiniz. Google yazı tipinin yanı sıra ücretsiz yazı tipleri için kaynaklar vardır. Adobe’den Typkit, çok yüksek kaliteli yazı tipleri sunmaktadır. Yalnızca premium yazı tiplerinden birini istiyorsanız veya yüksek trafiğe sahip bir web siteniz varsa artırmanız gereken ücretsiz bir sürüm ve ücretli seviyeleri var.
Adobe TypeKit
Yazı tiplerini bulmak için mevcut birçok ücretsiz yazı tipi kitaplığı da kullanabilirsiniz. Yazı tipinin uygun olduğundan emin olmak için kullandığınız yazı tipi lisansını kontrol ettiğinizden emin olun, örneğin gelir üreten web siteleri için kullanırsanız ticari bir lisans. Yazı tipi boyutu tasarımınızdaki farklı tipografik unsurlar, web sitesinin tüm nüansı ve okunabilirliği üzerinde büyük bir etkiye sahip olabilir. Açık yönergeler ayarlamamak, web sitelerinin tutarsız ve profesyonelce görünmesine neden olabilir. Kopyanın bir paragraftan bir sonraki paragrafa farklı şekilde düzenlendiği web sitesini gördüm ve iyi görünmüyor. Çeşitli tipografik unsurların boyutunu seçmenin oldukça zor olduğunu hatırlamak da iyidir, bu yüzden başkalarına bırakmayın. Kılavuzu ayarlayacağınız metin öğesini belirlemek isteyeceksiniz. En azından, bu çeşitli başlık boyutları (H1, H2, H3 ve benzeri) ve paragraf öğeleri olmalıdır. Metninizin oranını belirlemenize yardımcı olmak için Tip Ölçeği veya Modüler Tür gibi araçları kullanabilirsiniz. Metnin çeşitli öğelerinin ne kadar olması gerektiğini hesaplamak için oranı kullanarak çalışır.
Çeşitli tipografik öğelerin boyutunu seçmek için modüler ölçek gibi araçları kullanın
YAZI TEMSİSİ KURULCU TURULUK KORUNMAK İÇİN, Tasarımınız boyunca çeşitli tipografik öğeler için yazı tiplerinin ağırlığını belirlemelisiniz. Bir nedenden dolayı çeşitli tipografik öğeleri ayırt etmek için yazı tipi ağırlığı kullandığınızdan emin olmalısınız.
Dikey Çizgi Yüksekliği Tipografik eleman hattınızın yüksekliği kopya kopyanız için çok önemlidir ve dikey ritmi korur. Dikey ritminin duyarlı web siteleriyle korunması zordur, örneğin, boyut olarak değişen görüntünün yüksekliği çeşitli cihaz türlerindedir. Duyarlı web sitesinin karşılaştığı zorlukların yanı sıra, bazı dikey ritim biçimlerini korumaya çalışmak, tasarımınızı daha uyumlu hale getirmeye yardımcı olacaktır. Tipografik elemanlarınızın (H1, H2, H3, P) hatlarının yüksekliğini ve istediğiniz dikey ritmi koruyan dolgu ve kenar boşluklarını belirlemek isteyeceksiniz.2. Doğru rengi seçen renk paleti, tasarımınızın bir başka önemli unsurudur.Doğru renk seçenekleri ziyaretçinizin duygularını, görüşlerini ve davranışlarını etkileyebilir.Biyoloji/evrim, cinsiyet ve ekolojik değerlik dahil olmak üzere hangi renklerin en iyi seçileceği hakkında birkaç teori vardır.Renklerin neden yaptıkları etkiye sahip olduğunu anlamak, ziyaretçileriniz için ‘doğru’ hisseden daha yüksek bir dönüşüme sahip bir site üretmeye yardımcı olabilir.Renk teorisi popüler bir konudur ve bu nedenle Paletton ve Adobe Kuller gibi birçok araç vardır. Adobe Kuller Renk Toplama Araçları
Kullanacağınız tüm ana renkleri (birincil, ikincil, üçüncül ve aksan) ve parlak ve koyu renkleri belirlemek isteyeceksiniz. İdeal olarak, her rengin çeşitli yoğunluğunu ve parlak ve koyu gölgeleriniz arasındaki farklı tonları belirleyeceksiniz. Renk paletinizi belirledikten sonra, tasarıma nasıl uygulanacağı konusunda rehberlik sağlamak istersiniz. Yazı tipinin rengini, arka plan rengini, ankraj öğelerini ve tüm tasarımlarınızda tutarlı kalmak isterseniz belirlemek isteyeceksiniz. Çok farklı iki tür görüntüyü hayal edin: biri dizüstü bilgisayardaki gerçek bir kişinin fotoğrafı, diğeri çizgi film görüntüsü, bir kişinin vektörü. Her ikisi de çok farklıdır, ancak kullanılacak görüntü türü için herhangi bir kural belirlemediyseniz, web sitenizde değişiklik yapan kişiler her ikisini de kullanmanın bir sorun olmadığını düşünebilir. Görüntünüz için yönergelerin belirlenmesi, yazı tiplerini ve renkleri belirlemekten biraz daha zor olabilir. Görüntüler çok öznel olabilir;
Bununla birlikte, tonlar, renkler, konular, özellik oranları ve kalite gibi özellikleri belirleyebilirsiniz.Üstün görüntüsünüzü doğru bir şekilde almanın neden önemli olduğunu okuyun.3. Ikonografi Birçok web sitesi bir tür simge gösterecektir.Sizinki bunu yapan biriyse, stil kılavuzunuza simgeyi girmek isteyeceksiniz.Simgeniz özel değilse ve hazır yapımı simge setini kullanıyorsanız, stil kılavuzuna eklemek, hangi ayar simgelerinin kullanılacağını, boyutu, renk ve nerede kullanılacağını bildirmek kadar basit olabilir.Özel bir simgeler koleksiyonu kullanıyorsanız ve daha fazla özel simgenin yapılmasını gerektirebilirse, bunun için daha fazla kural belirlemeniz gerekir. Google, Malzeme Tasarım simgesi için yönergeler sağlar
WordPress sitenize harika yazı tipi simgesini nasıl hızlı bir şekilde ekleyeceğinizi öğrenebilirsiniz. 4. Web tasarımı nefes alan öğenizi sağlamak için boşluk çok önemlidir. Üst ve alt marjı ve dolguyu belirlerken, dikey ritiminizi tipografide belirtildiği gibi düşünmelisiniz. Her öğeye ne kadar alana ait olması gerektiğini tam olarak belirleyin. Bir tasarımın tutarlı ve kasıtlı bir mesafe olmadan nasıl görünmeye başlayabileceğine şaşıracaksınız. 5. Düzen yeni bir sayfa oluşturacaksanız, yeni düzen için kuralları belirleyin, bu da web sayfalarında çalışan birden fazla kişiye sahip olacaksanız çok önemlidir. Örneğin, yöneticinin istedikleri formatta ana içeriği yapmasına izin veren çalıştığım web sitesi, genellikle zaman içinde tutarsız ve dağınık bir şekilde sona erer. Bir sayfa sayfaya giriş ile başlayabilir, ardından SSS’yi girebilir ve ardından harekete geçme davetiyle bitirebilir. Birisi gelir ve benzer bir şey için başka bir sayfa yapar, ancak bu sayfada bir düzen, giriş, referanslar, farklı SSS’ler vardır ve sonra harekete geçme davetiyesi yoktur. Tasarımınız stratejik olmalı, ideal olarak testlere dayanmalı ve kararınızın arkasındaki stratejiyi bilmeden herkesin tasarımı değiştirmesine izin vermeli, muhtemelen profesyonel olmayan web sitelerinde ve düşük performansla sonuçlanmalıdır. 6. Bileşenler bileşenler düğmeler, listeler ve metin alanları gibi öğeler şeklinde olabilir. Web sitenizdeki ortak bileşenler için bir stil kılavuzu oluşturduğunuzdan emin olun.
Sonuç olarak, şimdi kendi web tasarım stili kılavuzunu yapmak için bir aracınız olduğu sonucuna vardım.Burada uygulayın ve gelecekteki web projenizin projede kaç kişi çalışırsa çalışsın, tutarlı bir stile sahip olarak harika görünmesini sağlayacaksınız. Bahsedilmemiş web tasarım stili kılavuzunuza dahil etmek istediğiniz bir şey var mı? üstünde?Bize aşağıdaki yorumlarda anlatın.
Etiket: tasarım
