Tasarım rehberleri, tasarım ekibi çıktılarını en üst düzeye çıkarmak ve tutarlı bir marka kimliğini sağlamak için paha biçilemez bir araçtır. Başarılı tasarım kılavuzlarının altı temel bileşenine bakıyoruz.

Bir tasarım rehberi, yeni bir web sitesi veya marka kimliği ile gelen bir belgeden daha fazlasıdır. İyi bir tasarım rehberi, kendi başına bir sanat eseridir ve günlük tasarım çalışmalarında pratik bir uygulamaya sahiptir. Projenizin ne olduğunu ve olmasını istediğini sergiliyor. Tasarım, ses ve hatta kod unsurlarını, yönetilebilir, kullanılabilir ve anlaşılması kolay bir şekilde bir araya getirmelidir.

Belgelerinizde bulunması gereken altı tasarım kılavuzu öğesiyle başlar. (Değilse, rehberinizi hemen gözden geçirin!)

1. Marka Kimliği Örnekleri

Tasarım rehberiniz, marka kimliğinizi, tasarım malzemelerinin görünmesini istediğiniz şekilde temsil eden görsel bir biçimde sergilemelidir. Bu gösterinin bir sınıf örneği, söyleme. (Rehberde görsel örneklerle birlikte söyleyecek bir şeyler olmasına rağmen).

En iyi örnekler, tasarım standartlarının tasvir edilmesinin ne amaçla tasarlandığını gösteren gerçek durum kullanımlarıdır.

Tasarım en iyisi olduğunda web sitesi ana sayfanızdan, mobil ana sayfanızdan, uygulamanızdan veya başka bir yerden ekran görüntülerini kullanın.

Ne güzel Ride Aşk tasarım rehberi, kitapçıktaki her sayfa web sitesine benziyor, marka tutarlılığı yaratıyor. Kılavuz, tasarımın küçük öğelerini, doğru bir şekilde uygulama simgeleri için doğru stil gibi, odak haline getirir.

Tasarım kılavuzunda gerçek örnekleri kullanmanın en iyi yanı, görsel öğeleri sergilemek için fazladan iş yaratmak zorunda kalmamanızdır; onları zaten elinizde var. Ayrıca, ekip üyeleri yazılı kılavuzun gerçek uygulamada çalıştığını bileceklerdir çünkü görsel kanıt var.

binmek

2. Tasarım Kuralları

Renk örneklerinden tipografi paletlerine, şekillere ve tasarım öğelerinin kullanımına kadar her şey açıkça belirtilmelidir.

Tasarım neden belli bir şekilde görünüyor ve çalışıyor? Arkasındaki felsefe nedir?

Bu şeyleri açıklamak, kullanıcıların tasarım stilini ortamlar arasında daha doğru ve tutarlı bir şekilde uygulamasına yardımcı olabilir. Web sitesi tasarımı söz konusu olduğunda, matbaacılık markalarından farklı olabilecek unsurları ve bunların nasıl ilişkilendirileceğini eklemek iyi bir fikirdir. Örneğin, birçok tasarımcı, kullanım kolaylığı için Google Yazı Tiplerinin Typekit kullanımını en üst düzeye çıkarmak için basılı markalamayı taklit eden çevrimiçi bir farklı tipografi paletini tercih ediyor.

Bu, tasarım stratejinizin bir parçasıysa, hangi yazı tiplerinin yerini aldığına dikkat edin.

Tasarım yönergelerini ana hatlarıyla belirtmek gerekirse, H1 etiketleri her zaman 88 nokta veya küçük resim her zaman 200 x 200 pikseldir, ancak gereksiz ayrıntıları aşırı iletmezler. Ekip üyelerinin bir bakışta bilgileri görmesini ve bunu bir teknik özelliklerde bir şeyler bulmaya çalışarak tartmalarını istemezsiniz.

netflix

3. Ses ve Kişilik

Yazım kılavuz ilkeleri, tasarım kılavuzunun diğer görsel öğeleri olarak düşünmek kadar eğlenceli değildir, ancak aynı derecede önemlidir.

Kopya için açıklayıcı bir yazma stili, görselleri de etkileyebilir. Kullanmayı seçtiğiniz görüntü türüne ve hatta renk ve tür gibi öğelere katkıda bulunur. Tüm bu ürünler marka için genel bir kişilik yaratmak için bir araya geliyor.

Dış dünyanın sizi nasıl tanımlayacağı.

Dahası, güçlü bir ses ve kişilik, görsel kimliğin bir parçası haline gelir. Tasarım öğelerinde iyi bir kişilik gösterir, çünkü kullanıcılar tasarım öğelerini markanın geri kalanının içeriği dışında bile hemen hemen tanımlayabilirler. (Coca-Cola kırmızısını veya Disney'in imza yazı tipini düşünün.)

ses

4. SEO Anahtar Kelimeler

Arama motoru optimizasyonu, web sitesi tasarımının en çok konuşulan ve en az eğlenceli bölümlerinden biri olabilir. Anahtar kelimeleri erken ve sıklıkla düşünün.

Bunları marka hakkında konuştuğunuz şekilde, tasarıma ilişkin açıklayıcı dilde ekleyin ve tasarım rehberindeki en iyi anahtar kelimelerin bir listesini yapın.

Şehir tesisatçıları Marka kılavuzunda iyi tasarlanmış (ve eğlenceli) bir anahtar kelime listesi var. Giyim markası çok sayıda farklı anahtar kelime kullanıyor olsa da, en önemli kelimeler renkle vurgulanır, böylece onları hemen görürsünüz.

Bunun gibi bir anahtar kelime listesi, söylemek istediğiniz kelimeleri aklınıza getirir, her gördüğünüzde. Kopya yazan çoğu insan, belli bir bağlamda bir kelimeyi gördüğünüzde veya düşündüğünüzde kafanızda sıkıştığınızı söyleyecektir. Bu tam olarak SEO anahtar kelime listesinin yapması gereken şey.

Tasarım öğeleri, söz konusu içeriğin web sitesi tasarımıyla ilgili olduğu her zaman bu anahtar kelimelerle ilişkili olmalıdır.

kentsel

5. Desen ve Eleman Stilleri

Çevrimiçi olarak çok farklı ortamlarla (basılı öğeleri de tasarlayan şirketlerden bahsetmeden), tüm olası kullanımlara yönelik kılavuzlara sahip olmak önemlidir.

Bu, logoların, renk paletlerinin, desenlerin ve form alanları ve gezinme gibi tasarım öğelerinin hala ve animasyonlu sürümleri için geçerlidir.

Tasarım kitabınız bu öğelere adanmış bir bölüm içermelidir. Ekibin sizi gerçekten sevmesini istiyorsanız, kullanıcıların hızlı bir şekilde kullanabilmeleri için öğeleri kopyalayıp yapıştırabilmeleri için çevrimiçi bir yerde desen ve öğe stili rehberi oluşturun.

ollo

6. Kod Parçacıkları

Her web sitesi tasarım rehberinin, yaygın olarak kullanılan kod parçacıklarını içermesi gerekir. Düğmelerden küçük animasyonlara ve kaydırıcı efektlere kadar, bu küçük kod parçaları, her yeni öğe ile özellikleri manuel olarak girme ihtiyacını ortadan kaldırarak günlük iş akışınıza saat katar.

Bu, blog gönderilerinden her şey için işe yarar. Kullanıcı arayüzlerini daha ayrıntılı bir şekilde incelemek için blogcuların doğru boyut ve ürün için kopyalayıp yapıştırabileceği resimler için bir kod bloğu ekleyin.

Firefox, yakın zamanda yenilenen markalaşma ve logo kullanımı için tasarım kılavuzunda tasarım bileşeni bilgilerini içerir. Kod parçacıklarının tam bir kütüphanesini sağlamamış olsanız bile, web sitesi tasarımındaki sayfalarda H1 ile H4'ün nerelerde kullanılacağı ve düğmelerin ve resimlerin nasıl şekillendirileceği gibi bazı temel bilgileri eklemeyi unutmayın.

firefox

Sonuç

Bir tasarım kılavuzunun en iyi kısmı, statik bir belge olmak zorunda olmamasıdır. Markanız ve görsel kimliğiniz aynı şeyi yaptıkça büyüyebilir ve değişebilir.

Çoğu tasarımcı (özellikle web sitesi tasarımcıları), bir tasarım kılavuzunun çevrimiçi sürümlerini tercih ediyor. Böylece, değişiklik yapmak ve kod ve renk parçacıklarını yakalamak hızlı ve kolaydır. Web sitenize bir stil kılavuzu sayfası eklemeyi düşünün ve buna sık sık başvurmayı (ve güncellemeyi) unutmayın.