Stil Kılavuzları ve Stil Döşemeleriyle Çalışma Tasarımcının Kılavuzu

Yaratmak markalı kimlik kolay bir iş değil. Zor bir çaba gerektirir ancak aynı zamanda en ödüllendirici yaratıcı görevlerden biridir. Sık sık web projeleri arayüz tasarımı ile markalaşma karışımı. Bu kafa karıştırıcı olabilir çünkü her iki alanda da yapacak çok iş var.. Stil kılavuzları ve stil fayans web tasarımcıları için harika kaynaklar ve benzer görünseler de başarabiliyorlar iki farklı görev.

Bu yayında ikisine de katılmak ve bu yaratıcı varlıklardan elde edebileceğiniz avantajları ele almak istiyorum. Herkesin stil rehberleri veya stil döşemeleri oluşturmasına gerek yoktur. Ancak her tasarımcı en azından bunların ne olduğunu ve nasıl çalıştıklarını anlamalıdır..

Web İçin Stil Kılavuzları

Stil rehberleri hakkında çeşitli görüşler okudum. Bazıları bunların dijital örnekler olduğunu söylerken, diğerleri kod tabanlı stil kılavuzlarının en kullanışlı olduğunu söylüyor.

Her iki şekilde de, bir stil rehberinin amacı, web için diğer herhangi bir projeyle aynıdır. Tanımlar tutarlı modeller, kullanıcı arayüzü modülleri ve yaratıcı tercihler tasarım sürecinde kullanılır. Belli elemanlar için çok spesifik ve piksel-mükemmel ölçümler alabilir veya gevşek kalabilir ve görsel örneklerle kılavuzlar sunabilirsiniz..

Stil rehberi yapmanın tek bir doğru yolu yoktur. Tek yanlış yol, basitçe bir kaynak oluşturmaktır. başkaları tarafından anlaşılamıyor.

Amaç olacak bir varlık oluşturmaktır zamanın sınavına girmek. Olmalı düzenlemelere açık yeni kaynaklar yaratılırsa. Ayrıca, takıma katılan herkesin doğrudan kılavuza kolayca dalması için erişilebilir olması gerekir..

Bir stil rehberi olmalı Proje için gerektiği kadar detaylı. Genellikle içerir yeniden kullanılabilir varlıklar, tipografi, düğmeler, renk örnekleri, dokular ve genel sayfa öğeleri gibi.

Son zamanlarda ele aldık yaşam tarzı rehberi araçları sıfırdan yaşam tarzı kılavuzları oluşturmanıza yardımcı olabilir. Bu yaşam rehberleri, öncü geliştiriciler için daha fazladır, ancak tasarımcılar için de faydalı olabilirler. Bu konuyla ilgili daha fazla bilgiyi Smashing Magazine yazısında okuyabilirsiniz..

Mutlak favori kaynağım StyleGuides.io. Kapsar web için stil rehberlerinin temelleri, dahil olmak üzere canlı örnekler ve durum çalışmaları.

MailChimp'in desen kitaplığı, StyleGuides.io'da bulabileceğiniz en iyi örneklerden biridir. Bu çevrimiçi bir canlı tarzı rehber MailChimp'in ızgarasını, tipografisini ve sayfa öğelerini tanımlar.

Bir web şirketi için bir stil rehberi tasarladığınızda, her şeyi çevrimiçi yapmak yaygındır, ancak aynı zamanda iç kılavuzlar, ve yerel bir intranette saklayın veya bir kullanıcı giriş sayfasının arkasında özel olarak barındırın. Stil rehberine erişme biçiminiz gerçekten önemli değil. Hepsi aynı renkleri, desenleri ve görselleri iletmek için aynı amaca hizmet eder. bir web projesinin temasını eşleştirin.

Konuyla ilgili daha fazla bilgi edinmek için, stil rehberlerinde şu diğer yayınlara göz atın:

Ön Uç Stil Kılavuzları (24ways.org)
Bir web sitesi tarzı kılavuzu oluşturun (Creativebloq.com)
Mükemmel Web Tasarım Stili Kılavuzu Nasıl Yapılır (Dtelepathy.com)

Stil Fayanslarına Dallanma

Tarzı fayans tamamen farklı bir canavar. Bu fayans erken tasarım aşamasında kullanılan yaratıcı varlıklar Belirli bir estetiğe dokunmaya çalışırken.

Stil Döşemeleri web sitesi Samantha Warren tarafından oluşturuldu ve bilmeniz gereken her şeye sahip. Var belirli bir şablon yok Bir stil döşemesi tasarlamak için. Fakat Samantha'nın örnekleri başlıklar ve paragraf türleri, bağlantılar, desenler, ve olası renk seçenekleri ile birlikte markalı logo.

Stil döşemeleriyle çalışırken, hedefiniz sonuçta 2-3 farklı tarz fayans sun müşteriye veya yaratıcı yönetmene. Bu fayans bir ruh hali panosundan daha ayrıntılı, henüz tam bir mockup çok daha az detaylı.

Fayans bir anlam verebilecek kadar ayrıntılı olmalıdır web sitesinin kimliği ve ruh hali. Samantha teşvik eder sıfat kullanmak Her döşemeyi ayrıntılı olarak tanımlamak.

Müşteriler olabilir farklı fayanslara bakmak, ve favori parçalarını seç. Bu zaman kazandırır tasarlarken, müşteri zaten sevdikleri varlıkları görmüş, bu nedenle ciddi revizyonlar yapmak için daha az şans var.

Stil Döşemeleri web sitesinden harika bir teklif:

Stil döşemelerini iç tasarımcının araç setiyle karşılaştırmak oldukça uygun bir benzetmedir. Piksel-mükemmel bir modelin içine çaba sarfetmek istemezsiniz, sadece müşterinin çoğu renk ve yazı tipinden nefret ettiklerini fark etmesi.

Bunun yerine, bulmak için stil döşemeleri kullanın. ortak tema veya görsel dil Sitenin tamamında kullanılacak. Bu içerebilir markalaşma / kimlik ama aynı zamanda içerebilir UI özellikleri, açılır menüler veya CTA düğmeleri gibi.

Bunları kullanmalısın. devredilebilir varlıklar Sürecin başında. Tam bir mockup tamamladıktan sonra, artık stil döşemesine başvurmaya gerek kalmadı. Bununla birlikte, başlangıçta, stil karoları yaratıcı süreç için çok önemli olabilir. tasarımcı zamandan tasarruf ve müşteriye seçim için birçok seçenek iving.

Eğer istersen stil döşemelerine daha çok daldırın Bu ilgili mesajları kontrol edin.

Stil Fayansları ve Nasıl Çalışırlar?
Stil Döşemeleri: Tam Tasarım Kompozisyonlarına Alternatif
Stil Döşemeleri Yaratmak: Bir Tasarım Yönüne Kolay Bir Yaklaşım

Stil Kılavuzları ve Stil Döşemeleri

Stil kılavuzları ve stil döşemeleri arasındaki fark belirsiz ancak kesindir. bir stil rehberi daha fazlası detaylı ve bir olarak kullanılmalıdır sürekli başvuru kılavuzu yaratıcı ekip için. bir stil kiremit olarak kullanılabilir duygu panosu için fikirleri görsel olarak çizmek Kendiniz veya müşteri için. Onlar genellikle alışkın fikirleri keşfet, Proje bittikten sonra pek bir amaca hizmet etmiyorlar..

Stil döşemeleri genellikle kenarlarda daha pürüzlüdür ve kullanılırlar. Sadece erken yaratıcı süreçte. Bir stil kılavuzunun kullanılması amaçlanmıştır. tüm tasarım süreci boyunca ve daha sonra başvurmak için daha sonra bile sitede çalışabilecek diğer tasarımcılar için.

Her ikisinin de yararları ve sakıncaları vardır. Tarzı fayans hızlı ve eğlenceli, fakat fani doğada. Stil kılavuzları tam ve görsel dokümantasyon gibi davranmak, ama onlar da çok iş gerektirir.

Hangisini kullanmalısın? Sonunda projeye bağlı.

Küçük projeler Küçük işletme web siteleri gibi stil döşemeleri ile daha iyi çalışır. Küçük bir işletme sitesi için bütün bir stil rehberi oluşturmak çok fazla iş ve faturalandırılabilir saat gerektirir. Bu muhtemelen çoğu müşteri için maliyete değmez.

Ancak bir büyük proje NY Times'ı yeniden tasarlamak, hem stil plakalarından hem de stil kılavuzlarından faydalanabilir..

Dil ve ruh hali bulma Çünkü yeni bir proje her zaman değerli bir süreçtir. Bu stil fayans yapan şeydir hemen hemen her senaryo için mükemmel.

Ayrıca alabilirsiniz bu varlıklardan herhangi birini yaratmadan. Bazı tasarımcılar gider tel kafeslerden için ayrıntılı örnekler. Ve bazı müşteriler bir stil rehberi bile istemiyorlar çünkü alışılmayacak.

Proje bazında çalışın ve her biri için en iyisinin ne olduğuna karar verin..

Canlı Örnekler

Bunu örterek kapatalım örnekler Hem stil rehberleri hem de stil döşemeleri. Bu tasarımları Dribbble'a göz atarken buldum ve kendi stil rehberlerinde veya stil döşemelerinde istediğin kaliteyi örneklediklerini düşünüyorum..

Stil Kılavuzları

Bu inanılmaz Airbnb tarzı rehber Derek Bradley tarafından oluşturuldu. Çok basit ama açıkça gösteriyor ki ana desenler, renkler ve sayfa öğeleri tasarımda bulunmak.

İşte tasarımcı Naoshad Alam tarafından oluşturulan çok daha büyük bir dijital stil rehberi. Bu örnek çok daha organize ile renkler, tipografi, formlar, arayüz elemanları ve diğer UI özellikleri için bölümler.

Daha ayrıntılı stil kılavuzları, tüm bu tasarım öğelerini web’e koyar ve kod parçacıklarını dahil et her biri için.

Tasarımcı Cupi Wong bu rehberi AfterShip için hazırladı. Tipografi, düğmeler, renk seçenekleri ve genel sayfa öğeleri özenle hazırlanmış ve birlikte bölümlere ayrılmıştır.

Bu aynı zamanda web'e taşınmış ve çevrimiçi referans belgeleri olarak daha büyük oluşturulmuş olabilir.

UI tasarımcısı Greg Dlubacz bir web projesi için kendi UI tarzı rehberini paylaştı. Bu şey cidden çok büyük. Tam ekran önizlemesi 21.000 piksel yüksekliğe yayılıyor!

Kesinlikle şimdiye kadar gördüğüm en iyi dijital stil rehberlerinden biri. Bu aynı zamanda ekip üyelerinin başvurması için çevrimiçi bir dokümantasyon sayfasına yönlendirilebilir..

Stil Fayansları

UI / UX tasarımcısı Abdus Salam, bu organik karoyu organik gıda mağazası web sitesi için yarattı. İle çok basit düz tasarım öğeleri, bazı küçük UI özellikleri, ve bir Renk paleti.

Tasarımcı Adrian Cantelmi gerçekten elden çıkarma tarzı döşemeleriyle ayrıntılı olarak gitti. Renkleri ve tipografisi var ama aynı zamanda vektör çizimler.

Bu vektörler yardımcı olur marka, ruh halini ve genel renk düzenini tanımlayın web sitesinin.

Dünya Kupası Danışmanları'nın yeniden tasarlanması, çok temel özelliklere sahip kendi stilinde taşıdı. Birkaç düğme tasarımının yanı sıra birkaç simge, bazı renk seçenekleri. Basitlik oyunun adı.

Sitenin nasıl göründüğüne dair bir fikir edinirseniz bir bakışta o zaman doğru yapıyorsun.

İşte bir seyahat projesi için kullanılan reddedilen bir stil döşemesinin eğlenceli bir örneği. Tasarımcı Brennan Gleason sadece küçük bir karo örneği sağlar, ancak yine de Web sitesinin ambiyansı hakkında fikir sahibi olmak.

Son sözler

Web’de arama yaparsanız, daha birçok örnek, ipucu ve kaynak bulacaksınız. stil kılavuzları ve stil döşemeleri oluşturma. Ancak umarım bu makale her ikisi için de bir başlangıç olabilir ve bu tasarım varlıklarını anlama ve yaratmada akıcı olmanızı sağlar.