Model kitaplıkları olarak da bilinen stil kılavuzları, web siteniz büyüdükçe veya yeni ekip üyeleri bir web projesinde çalışırken tasarımınızın amaçlandığı gibi devam etmesini sağlamanın harika bir yoludur. Her stil veya desen, web sitenizin tasarım öğeleri için bir işaretleme ve stil grubudur.

Modern stil kılavuzları genellikle bir web sitesindeki veya uygulama tasarımındaki farklı öğeleri gösteren gerçek bir web sayfası olarak görüntülenir. Bir web projesinde birden fazla kişi veya hatta birden fazla ekip çalışırken, bir stil kılavuzu, görsel öğelerin nasıl görünmesi gerektiği konusunda tahminde bulunur. Proje tutarlılığı için herkesi aynı sayfada tutmanın harika bir yolu.

Ekibinizi yolda tutun ve kodunuz DRY

Görsel tasarımın yanı sıra bir stil kılavuzu, CSS dosyasının kontrolden çıkmamasını sağlamaya yardımcı olur. Hepimiz tekrarlayan kodlar deneyimledik, bu yüzden kodun sürdürülebilirliğini sağlamaya ve kesinlikle gerekli hiçbir şey olmadan yapmaya çalışalım. Ekibinizdeki herkes tüm stilleri tek bir yerde görebiliyorsa, stil sayfasında kopyalanmamaları için şu anda hangilerinin var olduğu kolayca görülecektir.

Stil rehberiniz, modüllerin ve diğer tasarım öğelerinin tasarımını içeren bir koleksiyon işlevi gördüğünden, yeni tasarım öğelerinin belirlenmiş standartlara uyup uymadığını görmek kolaydır.

Bir web stili kılavuzunda neler olmalıdır?

Bildiğimiz gibi, web tasarımı biraz vahşi olma eğilimindedir. İyi haber şu ki, özellikle stil rehberi kullanırken etkili web tasarımı kontrolünüz altında. Stil kılavuzları çok basitten çok karmaşığa kadar değişir. Başlamanız için buraya bazı fikirler ekledim.

Renk paletleri

Onaltılık rengin not edildiği renk örneklerini dahil etmek harika bir fikirdir. Gelecekteki zaman sıkıntısı çeken benliğiniz size teşekkür edecek! Kaç kez "Bu altıgen renk nedir?" diye sorduğumu veya sorduğumu hatırlamıyorum. Hızlı bir referansa sahip olmak kesinlikle herkes için kullanışlı olacaktır.

Tipografi ve hiyerarşi

Açıklayıcı başlık yer tutucuları, ekibinizin mizanpajınızdaki öğelerin ne tür bir bağlamda kullanılması gerektiğini anlamasına yardımcı olmada uzun bir yol kat edebilir.

Stil kılavuzları ayrıca önerilen bir başlık hiyerarşisi içermelidir. h1, h2, h3 vb. nedir? Birincil başlık, alt başlık ve kenar çubuğu widget başlığı gibi açıklayıcı kelimeler de gelecekte pek çok tahminde bulunmanızı sağlar.

Örneğin blok alıntılar gibi daha az yaygın olan tipografi öğelerini eklemeyi unutmayın. Nadiren kullanılanlar da dahil olmak üzere tüm metin örneklerini belirtmeniz gerekir. Kısa alıntılar veya referanslar için belirli bir başlık ve gövde stiliniz varsa, bunları daha sık kullanılan öğeler için yaptığınız ayrıntılarla belirtin.

Görüntüler

Projeniz için görüntülerin genel bir tedavisini ekleyin. Görüntüler kenarlıklar veya benzersiz bir opaklık efekti gerektiriyor mu? Hover etkileşimi var mı? Eğer öyleyse, bunu stil rehberinize alın. Birden fazla tedavi varsa, her birini dahil edin ve belirli tedavilerin ne zaman kullanılacağını tanımlayın.

Bağlantı, gezinme ve form stilleri

UX açısından bakıldığında, bağlantılar, gezinme ve form öğeleri, arka arkaya olması gereken çok önemli üç ördektir. Metin bağlantılarının, düğmelerin ve gezinme stillerinin stil kılavuzunuza dahil edilmesi gerektiğini şüphesiz biliyorsunuzdur. Ancak, bunların her biri için normal, üzerine gelinen, ziyaret edilen ve etkin stillerin örneklerini dahil etmeyi unutmak kolay olabilir. Sitenizin her ayrıntısında tutarlılığı sağlamak için bunları belgeleyin.

Harika stiller formla birleştiğinde, tüm web formu öğelerini göstermenin stil kılavuzunuzdan daha iyi bir yolu yoktur. Neyin işe yaradığını, neyin işe yaramadığını ve neyin eksik olduğunu, tüm form öğelerinin haritasını çıkarmak ve envanterini çıkarmak için harika bir yoldur.

Özellikle, form stilleri için dahil edilecek bazı temel bileşenler şunlardır:

• Normal giriş alanı durumu
• Odaklanmış giriş alanı durumu
• Etiket stilleri
• Form yer tutucu metni
• Kullanıcı aktif metni
• Kullanıcı tarafından girilen metin
• Gönder düğmesi
• Hata mesajı
• Onay kutusu stilleri

Stil rehberinize eklemek için daha fazla fikir

Karşılaşabileceğiniz her öğeyi listelemek zordur, ancak burada yararlı bulabileceğiniz birkaç öğe daha vardır:

• çağrı kutusu
• Yatay bağlantılar
• Yorum öğeleri
• Kategori etiketleri
• açılır model

Kendi web stili rehberinizi nasıl yapabilirsiniz?

Sıfırdan bir stil rehberi yaratmanın kahramanca başarısının üstesinden gelen şanslı kişiyseniz, sizin için bazı yararlı düşüncelerim var.

Şahsen boş bir HTML dosyasıyla başlamayı ve oradan gitmeyi seviyorum. Bu stil kılavuzunu gerçek web sitesinin veya uygulamanın CSS'sine bağlayın. Bu şekilde değişiklikler her iki yere de yansıtılır ve iki CSS dosyasını koruma konusunda endişelenmenize gerek kalmaz.

Sitenizin tüm öğelerinin envanterini alarak başlayın ve ardından her biri için ihtiyaç duyduğunuz işaretlemeyi stil rehberinize ekleyin. Ses korkutucu mu?

Önce sayfa kılavuzunu değerlendirin ve ardından stil kılavuzunu tipografi ve renk paleti gibi önemli öğelerle doldurun ve ilerledikçe daha fazla desen ekleyin. Daha fazla tasarım deseni, resimler, kısa alıntılar, kenar çubuğu stilleri, düğmeler ve form stilleri gibi şeyleri içerebilir.

Güven bana. Bu iyi harcanan zamandır. Ayrıca hiçbir şeyin kalıcı olmadığını ve her şeyin kolayca ayarlanabileceğini ve genişletilebileceğini hatırlatmak da güzel.

Tüm stilleri hızlı ve manuel olarak girmek sizin için uygun değilse, yeniden kullanılabilir desenler oluşturmayı ve kullanmayı kolaylaştıran bazı harika araçlar var.

Örneğin, Jeremy Keith'in Pattern Primer'ı bir klasördeki tüm kalıpların bir listesini oluşturacaktır. Bu, kod parçacıklarını bir kalıp kitaplığına dönüştürmek için basit bir PHP aracıdır. HTML olarak işlenen deseni göreceksiniz.

Bir başka harika seçenek de, stil kılavuzu belgeleri için harika bir araç olan Kyle Neath'in KSS'sidir. Oluşturulan bu otomatik stiller, CSS belgelerine bağlı bir HTML stil kılavuzu oluşturmanıza yardımcı olacak bir dizi yönergedir. KSS, CSS ön işlemcileriyle iyi çalışacak şekilde tasarlanmıştır ve birçok CSS çerçevesini barındırır.

Hepimizin bildiği gibi, bir web sitesi asla bitmez. Yeni unsurlara ihtiyaç duyulursa, yaşam tarzı kılavuzunuzu basitçe ekleyerek genişletmek kolaydır.

İlk stil rehberiniz, sonunda oluşturduğunuz sayfalarla aynı olmayabilir, ancak yeni stilleri test etmek için harika bir fırsattır ve özellikle birden çok tarayıcı için tasarım yaparken yararlıdır.

Stil kılavuzlarına örnekler

Harika stil kılavuzlarından gerçek hayattan örnekler ister misiniz? Anladın:

Amerika için kod
posta çipi
Satış ekibi

Stil rehberiniz tasarımınızda tutarlılık sağlayarak web sitesi genişletmeyi ve gelecekteki web geliştirmelerini kolaylaştırır. Stiller eklendikçe ve değiştirildikçe bu belge, ekibi bilgilendirmek ve stil oluşturma projenizi sergilemek için harika bir yoldur.