Styleguide Toolbox – Şablonlar, UI Kitleri, Araçlar ve Jeneratörler

Stil kılavuzları, bir kuruluştaki herkesin aynı sayfada olmasını sağlamak için önemli bir araçtır. Ne de olsa tutarlı bir stil sürdürmek marka bilinirliği ve okunabilirlik için hayati önem taşır ve yalnızca daha profesyonel görünür.

Bu Styleguide kaynaklarıyla ilgili harika olan şey, şüphesiz istediğiniz şekilde çalışmanıza izin verecek bir kaynak bulunmasıdır. İster favori görüntü düzenleyicinizle stilleri manuel olarak oluşturmanıza, ister bir tarayıcı aracılığıyla bunları otomatik olarak oluşturmanıza izin veriyor olsun, burada herkes için bir şeyler var.

Tutarlılık arayışınızda size yardımcı olacak bazı kaynaklar burada!

Hızlı Atlama: Styleguide UI Şablonları, Styleguide Web Şablonları, Styleguide Oluşturma Araçları, Living Styleguide Araçları ve Styleguide Üreticileri.

Stil Rehberi Kullanıcı Arayüzü Şablonları

Tony Jones tarafından hazırlanan Stil Kılavuzu Önizleme Şablonu (Çizim)

Sketch App kullanıyorsanız, bu ücretsiz Stil Kılavuzu Önizleme Şablonu güzel ve temiz bir Stil Kılavuzu geliştirmenize yardımcı olacaktır.

Tony Thomas tarafından UI Stil Kılavuzu Şablonu (PSD)

UI Stil Kılavuzu Şablonu , renk örnekleri, tipografi, ikonografi, form ve UI öğeleri içeren bir Photoshop (PSD) şablonu.

Samantha Warren'dan Stil Fayansları (PSD)

Stil Karoları , son bir görünüm oluşturulmadan önce, tasarım sürecinin başlangıcında tartışma için daha çok bir katalizör olarak kullanılmaları gerektiği için ilginçtir. Müşterilerinize bir tasarımı taahhüt etmeden önce olasılıkları göstermenin harika bir yolu.

Mark Ludemann'dan Duyarlı Dijital Stil Rehberi (Sketch)

Bazen, Stil Kılavuzlarını yalnızca herkese uyan tek bir genel palet olarak düşünme eğilimindeyiz. Duyarlı Dijital Stil Kılavuzu bir adım daha ileri giderek mobil cihazlar için stilleri tanımlar.

Rafal Tomal tarafından hazırlanan Web Stili Kılavuzu (PSD)

Web Style Guide , yoğun tasarımcıların projelerinde tutarlılığı korumaları için basit bir "hile sayfası" sağlamayı amaçlar.

James George tarafından hazırlanan Temel Beş Sayfa Stil Kılavuzu Şablonu (AI)

Temel Beş Sayfa Stil Kılavuzu Şablonu , Adobe Illustrator'da kullanabileceğiniz güzel bir şablon grubudur.

Marka Yönergeleri Şablonu (AI)

Marka Yönergeleri Şablonu , müşterilere renkler, yazı tipleri ve ne yapılmaması gerektiğine ilişkin net talimatlar içeren bir kaynaktır.

ZippyPixels tarafından hazırlanan Brandbooks Ücretsiz Marka Yönergeleri Şablonu (AI ve InDesign)

Brandbooks Ücretsiz Marka Yönergeleri Şablonu , sekiz sayfalık markalama stilleri ve belgelerini yazdırmak için kullanabileceğiniz etkileyici bir dosya koleksiyonudur.

Stil Kılavuzu Web Şablonları

Brad Frost'tan Stil Rehberi

Stil Kılavuzu Kılavuzu, mükemmel stil kılavuzları oluşturmak için bir standarttır.

CodyHouse tarafından CSS'de Stil Kılavuzu Şablonu

CSS'deki Stil Kılavuzu Şablonu, esneklik ve kolay güncellemeler göz önünde bulundurularak oluşturulmuştur.

Brett Jankord'dan Stil Rehberi

Style Guide Boilerplate , web projeniz için standart yazı tiplerini, renkleri, temel stilleri ve desenleri görüntülemek için etkileşimli bir yol sağlar.

Bootstrap Stil Rehberi , Kemie Guaida tarafından

Bootstrap Style Guide Boilerplate, bir Styleguide yaratmanın verimli bir yolunu sağlamak için popüler çerçeveyi kullanır.

Stil Kılavuzu Oluşturma Araçları

StilDocco

Node.js kullanarak StyleDocco , CSS'nizi okuyacak ve sizin için görsel bir Stil Kılavuzu oluşturacaktır.

stil aşağı

Styledown , CSS dosyalarınızda markdown'ı kullanarak bir Stil Kılavuzu oluşturmanıza olanak tanır.

Fabrikatör

Fabricator , proje belgelerini kolayca yazmanıza ve etkileşimli bir Stil Kılavuzu oluşturmanıza olanak tanıyan bir Node.js aracıdır.

Huge'dan Stil Rehberi

Stil kılavuzu , canlı, otomatik olarak güncellenen bir stiller deposu oluşturmak için projenizin yanında kullanılabilir.

Desen Laboratuvarı

Atomik Tasarım, Pattern Lab'in bileşen odaklı Styleguide sistemini tanımlamak için kullandığı terimdir. Bu, tasarımınızın küçük ayrıntılarını kapsayan, biraz daha derinlemesine olduğu anlamına gelir.

Yaşayan Stil Kılavuzu Araçları

SC5 Stil Kılavuzu Oluşturucu

SC5 Style Guide Generator , Styleguide'ınızı doğrudan bir web tarayıcısında oluşturmanıza ve düzenlemenize olanak tanır.

KSS – Knyle Stil Sayfaları

KSS , Ruby veya mücevher kullanan diğer çerçeveleri kullanarak bir Living Styleguide oluşturur.

BelgeCSS

DocumentCSS , sitenizle birlikte değişen canlı Stil Kılavuzları oluşturmanıza yardımcı olur.

Yaşam TarzıKılavuzu Mücevher

LivingStyleGuide Gem , diğerleri arasında Ruby, Middleman veya Padrino kullanarak Sass ve Markdown ile bir Stil Kılavuzu oluşturacaktır.

Stil Kılavuzu Üreteçleri

Bana Stil Ver

Bir Stil Rehberi oluşturmanın gerçekten hızlı bir yolunu mu arıyorsunuz? URL'nizi Stylify Me'ye girin ve saniyeler içinde bir URL'niz olacak!

Stil Kılavuzunu Öne Çıkar

Frontify Style Guide , çevrimiçi hizmetlerini kullanarak Styleguide'ınızı oluşturmanıza ve değiştirmenize izin vererek temel bilgilerin ötesine geçer.

Tony Jones tarafından hazırlanan Stil Kılavuzu Önizleme Şablonu (Çizim)

Sketch App kullanıyorsanız, bu ücretsiz Stil Kılavuzu Önizleme Şablonu güzel ve temiz bir Stil Kılavuzu geliştirmenize yardımcı olacaktır.

Tony Thomas tarafından UI Stil Kılavuzu Şablonu (PSD)

UI Stil Kılavuzu Şablonu , renk örnekleri, tipografi, ikonografi, form ve UI öğeleri içeren bir Photoshop (PSD) şablonu.

Samantha Warren'dan Stil Fayansları (PSD)

Stil Karoları , son bir görünüm oluşturulmadan önce, tasarım sürecinin başlangıcında tartışma için daha çok bir katalizör olarak kullanılmaları gerektiği için ilginçtir. Müşterilerinize bir tasarımı taahhüt etmeden önce olasılıkları göstermenin harika bir yolu.

Mark Ludemann'dan Duyarlı Dijital Stil Rehberi (Sketch)

Bazen, Stil Kılavuzlarını yalnızca herkese uyan tek bir genel palet olarak düşünme eğilimindeyiz. Duyarlı Dijital Stil Kılavuzu bir adım daha ileri giderek mobil cihazlar için stilleri tanımlar.

Rafal Tomal tarafından hazırlanan Web Stili Kılavuzu (PSD)

Web Style Guide , yoğun tasarımcıların projelerinde tutarlılığı korumaları için basit bir "hile sayfası" sağlamayı amaçlar.

James George tarafından hazırlanan Temel Beş Sayfa Stil Kılavuzu Şablonu (AI)

Temel Beş Sayfa Stil Kılavuzu Şablonu , Adobe Illustrator'da kullanabileceğiniz güzel bir şablon grubudur.

Marka Yönergeleri Şablonu (AI)

Marka Yönergeleri Şablonu , müşterilere renkler, yazı tipleri ve ne yapılmaması gerektiğine ilişkin net talimatlar içeren bir kaynaktır.

ZippyPixels tarafından hazırlanan Brandbooks Ücretsiz Marka Yönergeleri Şablonu (AI ve InDesign)

Brandbooks Ücretsiz Marka Yönergeleri Şablonu , sekiz sayfalık markalama stilleri ve belgelerini yazdırmak için kullanabileceğiniz etkileyici bir dosya koleksiyonudur.

Sonuç

Projeleriniz için Stil Kılavuzları oluşturarak müşterileriniz ve kendiniz için bu ekstra adımı atın. Yorumlarda bunları nasıl kullandığınızı bize bildirin!

Stil kılavuzu ilhamı arıyorsanız, şu gönderiye göz atmalısınız: İlham Verici UI Stil Kılavuzları Örnekleri.