Daha İyi UX için UI Stil Kılavuzu Oluşturma

Bu makalenin sesli sürümünü dinleyin

Uyumlu Bir Ürün Tasarımı ve Kullanıcı Deneyimi Sağlayın

1976'da Johnny Cash, montaj hattından çalınan Cadillac parçalarını toplamak için yirmi yıl harcayan Detroitli bir otomobil işçisinin hikayesini anlatan One Piece at a Time'ı çıkardı.

Ne yazık ki, işçi kaçak Cadillac'ını yapmaya başladığında, önemli tasarım özellikleri yıllar içinde değiştiği için birçok parçanın uyumsuz olduğunu fark ediyor. Biraz ustalıkla, özel yapım araba bir araya geliyor, ancak gittiği her yerde alay konusu olan hoş olmayan bir kargaşa.

Arka taraf da biraz komik görünüyordu
Ama bir araya getirdik ve üstesinden geldiğimizde
İşte o zaman sadece bir kuyruk yüzgecimiz olduğunu fark ettik.

Günümüzün dijital deneyimlerinin tasarımcıları ve geliştiricileri de benzer bir zorlukla karşı karşıya. Zamanın geçişi, dijital ürünlerin sürekliliğine zarar verebilecek zorlu bir düşmandır. Zamanla ekip üyeleri gelir ve gider, trendler gelişir ve özellikler değişir. Ayrıca, günümüzün dijital ortamının hızlı temposu, ürün inovasyonunun yıllar değil çeyrek dönemler içinde gerçekleştiği anlamına geliyor.

Bir işletme veya tasarım ekibi, bir ürünün amaçlanan görünümünü ve hissini belgeleyen ortak bir kayda sahip değilse, görsel ve deneyimsel tutarsızlıklar ortaya çıkacak, kullanıcılar hayal kırıklığına uğrayacak ve markanın itibarı sarsılacaktır.

UI Stil Kılavuzları, dijital bir ürünün kullanıcı arayüzüne ve deneyimine uyum sağlayan bir tasarım ve geliştirme aracıdır. Özünde, onlar:

• Bir üründe meydana gelen tüm tasarım öğelerini ve etkileşimleri kaydedin
• Düğmeler, tipografi, renk, gezinme menüleri vb. gibi önemli UI bileşenlerini listeleyin.
• Fareyle üzerine gelme durumları, açılır dolgular, animasyonlar vb. gibi önemli UX bileşenlerini belgeleyin.
• Geliştiricilerin başvurması ve kullanması için canlı öğeler ve kod parçacıkları içerir

Uzman düzeyinde bir Kullanıcı Arayüzü Stil Kılavuzunun nasıl oluşturulacağına daha yakından bakmadan önce, herkese uyan tek bir yaklaşım olmadığını anlamak önemlidir. Stil kılavuzlarının değeri, büyük ürün ekiplerine sahip büyük markaların ötesine geçer. Tutarlı bir dijital deneyim arayan orta ve küçük ölçekli işletmeler, UI Stil Kılavuzları kendi özel ihtiyaçlarına göre özel olarak yapıldığında da fayda sağlar.

Bu Önemli Tasarım Bileşenlerini Kullanıcı Arayüzü Stil Kılavuzlarına Dahil Edin

Marka kimliği yönergelerine aşina olan tasarımcılar, UI Stil Kılavuzlarına geçişte sorun yaşamamalıdır, çünkü dahil edilmesi gereken önemli tasarım bileşenlerinin çoğuyla bol miktarda örtüşme vardır.

Profesyonel İpucu: Yalnızca ilgili tasarım bileşenlerini belgeleyin. Gereksiz bilgiler, Kullanıcı Arayüzü Stil Kılavuzlarını şişirir ve üzerinde çalışmayı zorlaştırır.

Tipografi Şeması

Tipografi, en yaygın arayüz tasarım öğelerinden biridir, bu nedenle bir üründe kullanılan yazı karakterlerinin yalnızca adlarını listelemek yeterli değildir. Başlıklar, Altyazılar, Başlıklar (H1, H2, H3), Gövde Metni ve Alt Yazılar için net talimatlar verilmelidir.

Ek olarak, yazı tipi boyutları sağlanmalı, ağırlıklar belirtilmeli ve stiller tanımlanmalıdır. Satır yüksekliği ve karakter aralığı da gereklidir ve özel durumlar ortaya çıktığında kullanılacak bir go-to yazı tipini seçmek iyi bir fikirdir.

Duyarlı Düzenler

Dijital ürünler duyarlı ızgara sistemleri etrafında tasarlandığında, UI Stil Kılavuzları, ekran boyutlarındaki arayüz düzenlerini ele almalıdır. Bu, boşluk, dolgu ve yerleştirme için notlar ve örnekler dahil etmek anlamına gelir. Farklı ekran boyutlarına göre ürünün ızgara sisteminin katmanlarını göstermek de yararlıdır.

Buradaki büyük amaç, tek seferlik ekran tasarımlarına olan ihtiyacı önlemek için yeterli bağlamı sağlamaktır. Zamanla, bunlar dijital bir ürünün bütünlüğünü arttırır ve baltalar.

Renk paleti

Bir arayüzü bozmanın en hızlı yollarından biri tutarsız renk kullanımıdır, bu nedenle renk kombinasyonlarının net bir şekilde tanımlanması gerekir. Renklerin ve değerlerinin (HEX, UIColor) listelenmesi iyi bir başlangıçtır, ancak belirli eşleştirmeler ve kullanım örnekleri de verilmelidir.

Kullanıcı Arayüzü Stil Kılavuzu bir dizi marka kimliği yönergesine atıfta bulunuyorsa, daha açık vurgu renklerinden oluşan ikincil bir şema olup olmadığını kontrol edin. Değilse, kendinizinkini oluşturun ve belgeleyin. Gri değerlerin seçimi de yararlıdır.

Düğmeler

Neredeyse her arayüzde düğmeler bulunur, bu nedenle boyutları, stilleri, renkleri, yerleşimleri, aralıkları ve tipografik öğelerini belgelemek için zaman ayırın. Farklı bağlamlarda çeşitli düğmeler kullanılıyorsa, bunu da netleştirin.

Gerekli Olabilecek Ek Kullanıcı Arayüzü Bileşenleri

• ikonografi
• Araç ipuçları ve açılır pencereler
• modlar
• Form öğeleri
• Veri Tabloları
• Gezinme menüleri
• Grafikler ve veri görselleştirmeleri
• Sekmeler
• Açma-kapama anahtarları
• diyaloglar
• İçerik ızgara listeleri
• Dikey listeler
• Araç çubukları
• Tarih ve saat seçiciler
• Yükleme göstergeleri
• onay kutuları
• uyarılar
• açılır menüler
• kaydırıcılar
• stepper
• sayfalandırma

Tasarım Talimatlarını Organize Edin ve Bağlamlandırın

Sahip olunması gereken UI bileşenlerine ek olarak, UI Stil Kılavuzlarına işletmelerin ve tasarım ekiplerinin başvurmasını, gezinmesini ve uygulamasını kolaylaştıran bir dizi pratik özellik vardır.

İçindekiler

İyi organize edilmiş ve açıkça işaretlenmiş bir içindekiler, herkesin belgenin içindekileri hızla bulmasına yardımcı olmanın basit bir yoludur.

Bağlam Notları

Bir ürünün kullanım ömrü boyunca ortaya çıkabilecek her sorunlu tasarım kararını tahmin etmek imkansızdır, bu nedenle sık kullanılan UI bileşenlerinin arkasındaki tasarım mantığının açıklanması, öngörülemeyen senaryoların çözülmesini kolaylaştırabilir.

Örneğin:

“Özünde, ürünümüz dünyanın dört bir yanından en iyi mimari görüntüleri sergilemekle ilgilidir. Bu nedenle, arayüzümüzün düzeni, metin yerine büyük, sıçrayan resimlere öncelik veriyor. Mümkün olduğunda, görselleri ürünümüzün odak noktası haline getirin.”

Aralık ve Konumlandırma Talimatları

Boşluk ve konumlandırma genellikle 'Duyarlı Düzenler' bölümünde ele alınmaktadır. Dijital ürünün karmaşıklığına bağlı olarak, talimatlar genel “temel kurallardan” oluşabilir veya oldukça ayrıntılı olabilir.

Yapılması ve yapılmaması gerekenler

Çoğu zaman, tasarımda yapılması ve yapılmaması gerekenleri net bir şekilde belirtmek yardımcı olabilir. Örneğin:

• “ Arayüz alt bilgisinde şirket logomuzun beyaz wordmark versiyonunu kullanın.”
• “Siyah arka planlarda şirket markamızın farklı renk versiyonlarını kullanmayın .”

Yapılacaklar ve Yapılmayacaklar tartışmayı önler ve tasarım ve geliştirme süresinden tasarruf sağlar, ancak her zaman aşağıdaki gibi bir bağlam notu sağlamak en iyisidir:

“Bu Yapılacaklar ve Yapılmayacaklar listesi, çok çeşitli önemli tasarım kararlarını kapsar, ancak ürünümüzün tasarım öğelerinin olası her türlü kötüye kullanımını hesaba katmaz. Bunu akılda tutarak, belirsizlik ortaya çıktığında en iyi kararı kullanın ve ürünümüzün genel görünümünü ve verdiği hissi doğru şekilde yansıtan seçimler yapın.”

Canlı Öğeler ve Kod Parçacıkları

Marka kimliği yönergeleri tipik olarak statik belgelerdir, ancak Kullanıcı Arayüzü Stil Kılavuzları, son üründe olduğu gibi çalışan canlı öğeler içerir; bu, düğmelerin düğmeler gibi davrandığı, açılır menülerin aslında aşağı açılır ve animasyonların canlandırıldığı anlamına gelir.

Kod parçacıkları, geliştiricilerin canlı öğelerin kodunu hızla kopyalayıp bir ürünün arka ucuna yapıştırmasına olanak tanır.

UI Stil Kılavuzlarını Tasarım Ekipleri için Kolayca Erişilebilir Hale Getirin

Artık bir stil kılavuzunun nasıl oluşturulacağını ve bir UI Stil Kılavuzunda bulunan bileşenleri ve özellikleri anladığımıza göre, dikkatimizi paylaşım ve iletişime kaydırıyoruz. Daha spesifik olarak, UI Stil Kılavuzlarını barındırma seçenekleri nelerdir?

Geleneksel olarak, UI Stil Kılavuzları web sayfaları olarak var olmuştur. Bu, tasarımcılara ve geliştiricilere kolay erişim sağlar ve tasarım öğelerinin ürün içinde olduğu gibi çalışmasına olanak tanır.

Daha yakın zamanlarda, ekiplerin ürünleri işbirliği içinde tasarlamasına, prototiplemesine ve test etmesine olanak tanıyan bir avuç bulut tabanlı platform ortaya çıktı. Aynı platformlar ayrıca UI Stil Kılavuzlarını barındırabilir ve ekip üyelerinin sürekli geri bildirim ve fikir alışverişinde bulunmalarına olanak tanır.

Bu platformlardan birkaçının UI Stil Kılavuzlarına yaklaşımlarını nasıl tanımladığını görelim.

Figma

“Tüm ekibin kullanabileceği bağlantılı UI bileşenleriyle tasarım sistemleri oluşturun. Paylaşılan bileşenlerde değişiklik yapıldığında güncellemeleri alın”

Faz

“Kütüphaneler her zaman olması gerektiği gibi: Renkler, Özellikler ve Öğeler…hatta geçiş zamanlaması — artık her şey bir bileşende. Yerinde düzenleyin; her şey ustadır. Örnek başına ihtiyacınız olmayan her şeyi geçersiz kılın.”

InVision

“Kullanım belgeleri de dahil olmak üzere tüm marka ve UX bileşenleri tek bir yerde yönetiliyor. Değişiklikler tüm ekiple eşitlenir ve tasarımcılar istedikleri zaman en son sürüme geçebilir veya güncellemeleri geri alabilir."

Malzeme.io

“Renk, şekil ve tipografiye stil değişiklikleri uygulayarak kendi Malzeme temanızı yapın ve markalı bir sembol kitaplığı oluşturun. Galeri'de tasarım yinelemelerini paylaşın, yükleyin ve sunun. Ardından geliştirici belgelerine erişmek için İnceleme Modu'nu kullanın."

UI Stil Kılavuzlarının Kullanımı Kolay Olmalı

UI Stil Kılavuzlarını birleştirirken, iletişim kesin olarak kabul edilemez. Ürün ekipleri, farklı disiplinlerden, kültürel geçmişlerden ve profesyonel deneyimlerden gelen insanlardan oluşur. Açıklık ve kullanım kolaylığı sağlamak için bu ilkeleri kullanın.

Basit Düzenler

UI Stil Kılavuzları, temiz, düzenli ekran düzenleri gerektirir. Her ekran iyi organize edilmiş, net bir şekilde etiketlenmiş ve oldukça okunaklı olmalıdır. Ekranları görsel bilgilerle aşırı yüklemenin hiçbir faydası yoktur, bu nedenle hem minimal hem de geniş olan düzenlemeleri hedefleyin.

Kısa Talimatlar

Talimatları kısa ve tatlı tutun. Uzun paragraflardan kaçının ve madde işaretleri kullanın. Mümkünse, kelimelerin üzerinde görsellerle gösterin.

Bilgilendirici Kullanım Senaryoları

Bu kaydırıcı stilini bunun üzerinde ne zaman kullanacağınızı mı merak ediyorsunuz? 'Senaryoları kullan' bu tür bir karışıklığı çözer. Yine, burada görseller kelimelerden daha güçlüdür, bu nedenle hem senaryoyu hem de ileriye doğru doğru yolu açıkça gösteren örnekler sağlayın.

İlgili Sürüm Geçmişleri

Dijital ürünler sık ​​sık güncellenir. Ürün ekipleri her son arayüz ayrıntısını iyileştirmeye çalışırken, tasarım bileşenlerinin nasıl geliştiğine dair sürekli bir kayıt tutmak önemlidir. Burada takdir yetkisini kullanın; daha küçük işletmeler ve ürün ekipleri için kapsamlı bir sürüm geçmişleri kitaplığı bulundurmak pratik olmayabilir.

UI Stil Kılavuzları Değerli Bir Kaynak ve Güçlü Tasarım Aracıdır

MailChimp, Google ve Salesforce gibi büyük markalar tarafından lanse edilen tasarım dili sistemlerinin kanıtladığı gibi, çağdaş tasarım ve geliştirme ekipleri verimliliğe ve çok disiplinli işbirliğine değer veriyor.

Tasarım dili sistemleri, karmaşık dijital ürünler üzerinde çalışan çeşitli ekiplerin standartlaştırılmış bir görsel dil kullanarak iletişim kurmasına olanak tanır. UI Stil Kılavuzları, tasarım dili sistemlerinin dokusuna dokunmuştur ve hızlı yineleme ve tutarlı dijital deneyimler için güvenilebilecek bir araç olarak hizmet eder.

Aynı zamanda tasarım sadece büyük şirketlere mahsus bir uğraş değildir. Çok çeşitli ürün ekipleri ve dijital projeler, iyi yapılandırılmış UI Stil Kılavuzlarından faydalanabilir, ancak kaynaklar (finansal, zaman ve yetenek) işletmeden işletmeye değişir.

Bu nedenle, UI Stil Kılavuzları, bireysel işletmelerin ve tasarım ekiplerinin ihtiyaçlarına göre uyarlandıklarında en kullanışlıdır. Her UI Stil Kılavuzunun en yüksek amacı, sürekli olarak keyifli kullanıcı deneyimlerine yol açan bir netlik ve pratiklik dengesidir.

Toptal Tasarım Blogunda daha fazla okuma:

• Web ve Baskı Tasarımı için Yazı Tipi Stilleri
• Duyarlı Tasarım - En İyi Uygulamalar ve Hususlar
• Startup'ların Neden Bir Stil Rehberine İhtiyacı Var?
• Simge Kullanılabilirliği ve Tasarım En İyi Uygulamaları
• İlhamınızı Kullanın - Mood Panoları Kılavuzu