2016 İçin En İyi 10 Web Tasarım Stil Rehberi

Stil kılavuzları, bir proje üzerinde çalışırken izlenecek talimatları veya yönergeleri içeren belgelerdir. Adından da anlaşılacağı gibi, web sitesi projeleri üzerinde çalışırken web tasarım stil kılavuzları kullanılır.

Bu makalede, size yüksek kaliteli web tasarım stil kılavuzlarından örnekler sunacağız. Bunun amacı, projelerinizde bu stil kılavuzlarını kullanmanızı öneren yeni bir makaledeki en iyi web tasarım ipuçlarından birini uygulamanıza yardımcı olmaktır.

Stil Kılavuzları nedir ve Neden Önem Vermeliyim?

Stil kılavuzları, kullanılacak yazı tiplerini ve renkleri basitçe özetlemekten, ses tonu, fotoğraf içeriği, sütun aralığı, ürün seçenekleri ve aklınıza gelebilecek her şey dahil olmak üzere bir projenin her yönünü kataloglamaya kadar boyut ve kapsam olarak değişebilir.

Yeni bir web sitesi oluşturma, bir pazarlama stratejisi oluşturma, bir marka oluşturma veya hatta bir blog yazısı yayınlama gibi, çoğu proje bir stil kılavuzuna sahip olmaktan yararlanabilir. Bir stil kılavuzu kullanmak, çalışmaya başlamadan önce önemli kararların belgelenmesine yardımcı olabilir ve sizin, ekibinizin ve müşterinizin en başından itibaren aynı sayfada olduğunuzdan emin olmanıza yardımcı olabilir.

Bir web tasarım stil kılavuzu kullanmanın bir başka yararı da, bir proje boyunca tutarlılık yaratmaları ve eğer biri kaldığınız yerden devam ederse, takip etmesi gereken net bir talimat setine sahip olmalarını sağlamalarıdır.

Bu nedenle, bir sonraki projeniz için ilhama ihtiyacınız varsa, kendi stil kılavuzunuzu nasıl oluşturacağınızı bilmek istiyorsanız veya tipografi ve ızgara düzenleri üzerinde merak uyandıran bir piksel itici iseniz, işte kontrol etmeniz gereken 10 web tasarım stil kılavuzu 2016.

2016'daki En İyi 10 Web Tasarım Stil Rehberi

Bu koleksiyondan en iyi şekilde yararlanmak için, bu web tasarım stil kılavuzlarından birini harfi harfine takip edebilir, en sevdiğiniz öğeleri karıştırıp eşleştirebilir veya bunları kendi yönergeleriniz için ilham almak için kullanabilirsiniz.

1. Google'dan Materyal Tasarımı

Adını bilseniz de bilmeseniz de, çoğunuzun aşina olacağı, Google'ın Materyal Tasarımı stil kılavuzuyla başlayalım. Bu stil kılavuzu, görünüşe göre kağıt ve mürekkebe dayanmaktadır, ancak tasarım yaklaşımında geriye doğru bakmaktan çok uzaktır.

Umarım, vahşi doğada kullanılan Materyal Tasarımı ile karşılaşırsınız. Bu ister Android mobil işletim sistemi ve Google Asistan aracı gibi Google'ın kendi ürün ve hizmetlerini kullanmaktan isterse bu popüler web tasarım trendinden etkilenen diğer birçok üründen kaynaklansın, Materyal Tasarımı her iki durumda da yeni olmamalıdır. sen.

Materyal Tasarımı, düz kullanıcı arayüzü trendinin kaldığı yerden devam ediyor ve tasarımcıların çalışmalarına daha fazla derinlik ve kişilik katarken, aynı zamanda minimalist kullanıcı arayüzlerinin modern çekiciliğini kullanmaya devam etmelerine yardımcı oluyor. Bu popüler web tasarım stil kılavuzunun tipik özellikleri arasında ızgara tabanlı düzenler, animasyonlar ve gölgeler bulunur.

İyi haber şu ki, bu tasarım dilini benimsemek istiyorsanız, Google Materyal Tasarımı el kitabı çevrimiçi olarak ücretsiz olarak kullanılabilir ve bu web tasarımı stil kılavuzunun amacını açıklamaya yardımcı olur. Aynı zamanda, böyle bir belge oluşturmakla görevli herkes için oldukça ayrıntılı bir stil kılavuzunun harika bir örneğidir.

Daha fazla bilgi

2. BBC Küresel Deneyim Dili

Hiçbir şeyi şansa bırakmayan bir stil rehberi arıyorsanız, BBC Global Experience Language belgesini oluşturan talimatlar harika bir örnektir.

BBC için web siteleri oluşturan web tasarımcıları için oluşturulan bu stil kılavuzu, kuralların arkasındaki felsefeyi ortaya koyarak başlar. O andan itibaren, bu belge ayrıntılara derinlemesine dalar. Sütun oluklarının piksel genişliklerini, ızgara düzeni kurallarını, logo konumlandırma yönergelerini ve çevrimiçi içerik oluşturmaya gelince aklınıza gelebilecek her şeyi kapsayan bilgileri bulacaksınız.

Çok çeşitli varlıkları tek bir ana marka altında birleştiren bir stil rehberinin nasıl oluşturulacağı konusunda ilham almak için BBC'nin bu kaynağı sizi hayal kırıklığına uğratmayacaktır.

Daha fazla bilgi

3. Mozilla Stil Rehberi

Dünyanın en popüler ikinci web tarayıcısından sorumlu ekibin tasarım değerleri hakkında daha fazla bilgi edinmek istiyorsanız, çevrimiçi Mozilla Stil Kılavuzu'na göz atmaya değer.

Bu stil kılavuzunda, logoların, renk şemalarının, ses tonunun ve sözcük işaretlerinin kullanımını kapsayan talimatların nasıl oluşturulacağına dair harika örnekler bulacaksınız. Müşterilerinizin veya ekibinizin izlemesi için bir kılavuz oluşturmak istiyorsanız, Mozilla talimat seti size bunun nasıl yapıldığını gösterecektir.

Daha fazla bilgi

4. Twitter Marka Varlıkları Yönergeleri

Logo tasarımcıları ve projelerinizin bir parçası olarak logoları ve grafikleri kullananlarınız, bu sosyal medya devinin açık ve net talimatlarını takdir edeceklerdir.

Twitter marka varlıkları stil kılavuzunda, logolarınızın ve diğer varlıklarınızın doğru şekilde kullanılmasını sağlamaya yardımcı olacak talimatların nasıl yazılacağına dair bazı iyi örnekler bulacaksınız. Bu çevrimiçi stil kılavuzu, renk paletlerini, logo yönünü, öğe aralığını ve bir terimler sözlüğünü kapsayan ayrıntıları içerir.

Web tasarım müşterilerinizin sıkı çalışmanızı kesmemesini veya projenizin arkasındaki logoların ve marka bilincinin bozulmamasını sağlamak istiyorsanız, Twitter marka varlıkları stil kılavuzu, takip etmek için iyi bir modeldir.

Daha fazla bilgi

5. Adobe Kurumsal Marka Yönergeleri

Adobe Kurumsal Marka Yönergeleri belgesi, markanızın ve şirket felsefenizin çok çeşitli platformlarda ve ortamlarda tutarlı bir şekilde uygulandığından nasıl emin olacağınızın etkileyici bir örneğidir. Web siteleri ve e-postalardan basılı posterlere ve ürünlere kadar her şey burada ele alınmaktadır – web tasarımcılarının kullanması gereken Adobe CC uygulamaları paketinden bahsetmiyorum bile.

Ölçek olarak çok büyük olmasına rağmen, Adobe marka yönergeleri, kapsamına rağmen anlaşılması nispeten kolay olan büyük bir stil kılavuzunun nasıl oluşturulacağını göstermek için ayrıntılı talimatları kullanım örnekleriyle birleştirir.

Birden çok platformu kapsayan bir proje üzerinde çalışıyorsanız, Adobe'nin bu stil kılavuzu, işinizin tüm yönleri için geçerli olan bir dizi talimatı nasıl oluşturacağınızı gösterebilir.

Daha fazla bilgi

6. Foursquare Brandbook ve Brandguide

Foursquare konum bulma uygulaması ve web sitesi, içeriğin ister kendi platformlarında yayınlansın, ister sosyal medyada ve başka yerlerde paylaşılsın, içeriklerinin kolayca tanınabilmesini sağlamak için katı bir kurallar dizisi izler.

İşinize bu düzeyde bir marka kimliği eklemek istiyorsanız, Foursquare'deki marka kitabına ve marka kılavuzu belgelerine göz atmak, zaman ayırmaya değer bir yatırımdır.

Bu iki kısa stil kılavuzunda, logo kullanımı ve konumlandırmadan ikonografi kurallarına, rozet tasarımına, metin yazarlığı yönergelerine ve ses tonu önerilerine kadar her şeyi kapsayan çok sayıda yapılması ve yapılmaması gerekenler bulacaksınız.

Simgelerle çalışıyorsanız veya web, mobil cihazlar ve sosyal medya için tasarım yapıyorsanız, Foursquare'deki stil kılavuzları, hem kendi mülkleriniz içinde hem de dışında tutarlı bir mesajı nasıl ileteceğiniz konusunda birçok ipucu sunar.

Daha fazla bilgi

7. MIT Grafik Kimliği

Adobe ve Google'dan daha büyük stil kılavuzlarını biraz bunaltıcı bulduysanız, MIT marka kitabının web tasarımı bölümü hoş bir kontrast sunmalıdır.

Basitçe logo konumlandırma ve ifadeler hakkında temel bilgileri içeren bu, web tasarım projelerinizde aşırıya kaçmadan nasıl tutarlılık oluşturabileceğinize iyi bir örnektir.

Daha fazla bilgi

8. Ubuntu Stil Rehberi

Ubuntu stil kılavuzunun amacı, bu markayı web'e hassasiyetle getirmektir. Bu amaca yardımcı olmak için bu web tasarım stili kılavuzu, bir geliştirici veya tasarımcının üzerinde çalışıyor olabileceği herhangi bir web sayfasına Ubuntu CSS dosyasını ekleme talimatlarını içerir.

Bir CSS dosyası sağlamak ilginç bir fikirdir. Bir web sayfasındaki tüm öğelerin şimdi ve gelecekte aynı görünmesini sağlamanın hızlı bir yoludur. Belge daha sonra, düzen ızgaralarını, tipografiyi, formları, tabloları, medyayı ve daha fazlasını kapsamaya geçmeden önce bağlantılar ve başlıklar gibi belirli öğeler için gerekli olan çeşitli stilleri açıklamaya devam eder.

Ubuntu web tasarım stil kılavuzu, kontrol etmeye değer. Bunun nedeni, yalnızca yönergeleri ve talimatları içermesi değil, aynı zamanda sonuca ulaşmak için gerekli olan gerekli HTML ve CSS işaretlemesinin de sağlanmasıdır.

Daha fazla bilgi

9. MailChimp UX Kılavuzu

MailChimp, etrafındaki en popüler e-posta pazarlama hizmetlerinden biridir, bu nedenle stil kılavuzlarını herkese açık hale getirdiklerini görmek harika.

Takipçilere öğelerin nasıl şekillendirilmesi gerektiğine dair örnekler sağlamanın yanı sıra, temel kod, bu yönergeleri mümkün olduğunca basit bir şekilde uygulamayı sağlamak için de sunulmaktadır. Bu çevrimiçi belge de güzel bir şekilde biçimlendirilmiştir, bu da onu takip etmesi daha kolay web tasarım stil kılavuzlarından biri haline getirir.

Izgara düzenleri ve tipografiden simgelere ve iletişim kutularına kadar her şey burada kapsandığından, hangi platform için tasarladığınızın önemi yok, MailChimp stil kılavuzundan bazı işaretçiler alabilmeniz gerekir.

Web tasarımcıları ve e-posta pazarlamacıları, projelerinde tutarlılığı sağlamak söz konusu olduğunda MailChimp stil kılavuzunu iyi bir ilham kaynağı bulacaklardır. MailChimp'in baş UX tasarımcısı Federico Holgado ile yaptığınız röportajda bu kılavuzun arkasındaki hikayeyi duyabilirsiniz.

Daha fazla bilgi

10. Web Stili Kılavuzu: Web Siteleri Oluşturmak İçin Temel Tasarım İlkeleri

Masanızda bulundurabileceğiniz çevrimdışı bir kaynak arıyorsanız, Patrick J. Lynch ve Sarah Horton'un Web Stil Rehberi biraz klasiktir.

Kuşkusuz, Web Stili Kılavuzu kitabı bir süredir güncellenmedi. Ancak, web tasarımının temelleri ve çeşitli organizasyonlardaki web tasarımcılarının ihtiyaçları konusundaki tavsiyelerin hala bir miktar değer sunduğunu görmelisiniz.

Bazı fikirlerin modası asla geçmez ve tasarım kararları verirken başvurulacak basılı bir kitaba sahip olmak, dijital çağda bile çok değerli olabilir.

Daha fazla bilgi

Çevrimiçi Yapıcılar için Diğer Stil Kılavuzları

Başarılı bir web tasarım projesine genellikle web sitesinin kendisinden daha çok şey girer.

İçerik oluşturma veya grafik tasarımla görevlendirildiyseniz, bu disiplinler için stil kılavuzları aramak daha tutarlı işler üretmenize yardımcı olabilir. Yine, bunları başkalarının izlemesi için kendi ayrıntılı talimatlarınızı oluşturmak için şablon olarak da kullanabilirsiniz. İşte göz önünde bulundurmak isteyebileceğiniz birkaç stil kılavuzu daha:

AP Stylebook, gazetecilerin incili olarak tanımlanır ve spiral ciltli bir kitap ve etkileşimli bir e-Kitap olarak mevcuttur. Bu yazı stili kılavuzu düzenli olarak güncellenmektedir, bu nedenle en yeni konular hakkında yazarken rehberlik sağlayabilmelidir.

Yahoo! Stil Kılavuzu, dijital dünya için içerik yazmak, düzenlemek ve oluşturmak için popüler bir kaynaktır. Web için yazan herkesin, elden ele geçirmek zorunda kalmadan yararlanabileceği uygun fiyatlı bir seçenektir. Yazınızın tutarlı kalmasını istiyorsanız, bunun gibi bir stil rehberinin yanınızda olması gerçekten yardımcı olabilir.

Profesyonel görünümlü stil kılavuzları oluşturmanıza yardımcı olabilecek bir yazılım arıyorsanız, 2016'daki en iyi web tasarım araçları koleksiyonumuza göz atın.

Web Tasarım Stil Kılavuzları Üzerine Son Düşünceler

Gördüğünüz gibi, web tasarım stil kılavuzları birçok şekilde olabilir. Renk ve yazı tipi seçimlerini basitçe özetleyen tek sayfalı belgelerden tasarım felsefesinden bir sayfadaki öğeler arasındaki piksel genişliğine kadar her şeyi kapsayan büyük belgelere kadar, kendi belgenizi oluşturma konusunda bolca özgürlüğe sahipsiniz.

Bu web tasarımı stil kılavuzlarını keşfettikten sonra, artık çok çeşitli özellikler ve ortamlarda tutarlı ve tanınabilir bir stil oluşturmayla ilgili çalışmalara ilişkin daha iyi bir kavrayışa sahip olacaksınız.

Bu kılavuzlardan ilham alarak artık sizin, müşterilerinizin veya ekibinizin takip etmesi için etkili talimatlar yazabileceksiniz. Bu da vizyonunuzun anlaşılma ve projenin başarılı olma şansını artıracaktır.

Lonely Planet, Captial One ve Starbucks gibi kuruluşların stil rehberlerinin ardındaki hikayeleri dinlemek isterseniz, Stil Rehberi podcast'i dinlemeye değer.

Bu web tasarım stil kılavuzlarından hangisi sizi en çok etkiledi? Lütfen düşüncelerinizi aşağıdaki yorumlarda paylaşın.

Axsimen / Shutterstock.com'dan makale küçük resmi