Startup'ların Neden Bir Stil Rehberine İhtiyacı Var?

Deneyimli bir tasarımcı için bile belirli bir ürün için yeni bir stil kılavuzu oluşturmak zordur - birçok olası tasarım yönü vardır ve süreç hızla bunaltıcı hale gelebilir. Başlangıç ​​​​hayatı telaşlı, hızlı ve “mükemmel yapılanın düşmanıdır”, “hızlı hareket et ve bir şeyleri kır” veya “şimdi başlat, sonra düzelt” gibi klişelerle dolu.

Bu tür sloganlar ve değişken öncelikler altında bir stil rehberi bulmak zor ama bir ürünün tasarımı uzun vadede başarılı olacaksa bir zorunluluktur.

Son yıllarda tasarım sistemleri, stil kılavuzları, desen kitaplıkları ve atom tasarımı hakkında çok şey duyduk. Bu araçlar çok kullanışlı olsa da, bir MVP için yalnızca birkaç ekran oluşturmak veya bir uygulamanın demosunu yapmak istediğinizde bunları kullanmak aşırıya kaçmış gibi görünebilir. Bununla birlikte, bir stil kılavuzuna sahip olmak yalnızca genel olarak tasarım sürecinizi iyileştirmekle kalmaz, aynı zamanda uygulamanızı daha sağlam ve tutarlı hale getirir.

Önce bir stil kılavuzunun temel faydalarından bahsedelim ve ardından zorlu başlangıç ​​​​ortamına değinelim. Son olarak, bir stil kılavuzunun nasıl her zaman yaşayan bir belge olarak geliştiğini tartışacağız.

Stil Rehberinin İyi Bir Fikir Olmasının En Önemli Beş Nedeni

1. Bir Stil Rehberi Tasarımları Somutlaştırıyor ve Markalaşmayı Net Hale Getiriyor

Bir startup'ta yalnız bir tasarımcı olarak -ki bu genellikle böyledir- ekipteki diğer kişiler tarafından verilen tasarım kararlarını gözden geçirmek ve sorgulamak için pek fazla fırsat yoktur. Herkes işbirliği içinde çalışıyor olsa da, tasarımlar mutlaka başkalarıyla paylaşılmaz. Bu, nihai tasarımları onaylayan yalnızca bir kişi olduğu anlamına gelir.

Bir stil kılavuzu, referans için rehberlik ve belgeler içeren bir başlangıç ​​sağlayacaktır. Uygulamanın küresel bağlamında doğrulanmaları gerekeceğinden, tasarımcı veya ekip tarafından yapılan bazı tasarım seçimlerine meydan okuyacaktır. Bir UI bileşenini tek ekranda iyi çalıştığı için tasarlamak onu kesmez. İyi düşünülmüş bir tasarım, tek bir durumdaki tek bir tasarım sorununu ve uygulamanızın diğer ekranlarında bulunan yaygın bir sorunu çözmelidir.

Bir stil kılavuzu, genel tasarım stilini, marka yönergelerini, teknik özellikleri ve kuralları şirketinizdeki herkesin kullanımına sunar. Sadece bir tık uzağınızda. Çevrimiçi stil kılavuzuna kolayca erişmek veya bir PDF indirmek için bir URL'ye gidebilirler. Tasarım herkesin işi haline gelir; artık tasarım ekibinin tek sorumluluğu değildir. Ürününüzün kullanıcı arayüzünü iyileştirecek ihtiyatlı bir yaklaşımdır.

2. Stil Rehberi Tasarımınızı Daha Tutarlı Hale Getirir

UI tasarım diliniz için bir çeşit sözlük sağlar. Daha önce ifade ettiğiniz bir şeyi iletmek istediğinizde aynı terminolojiyi kullanabilirsiniz. Aynı şeyi ifade etmek için biraz farklı kelimelerimiz olduğunu hayal edin:

1. "Yağmur yağıyor; Şemsiyeme ihtiyacım var.”
2. “Yağmur yağıyor, şemsiyeme ihtiyacım var”
3. “Yağmur yağıyor, şemsiyeme ihtiyacım var”

Bir dili şiirsel yapabilir, ancak anlaşılması zor olabilir. Temel olarak, bir sitenin veya uygulamanın kullanıcı arayüzü ile aynı fikirdir. Kullanım kolaylığı için, yalnızca gerçekten yeni bir şey yaratırken yeni bir "kelime" icat etmelisiniz. Bu şekilde, "Yalnızca ürün boyunca bir tasarım sorununu tekrar tekrar çözen bileşenlerin ürüne ve ardından stil kılavuzuna girmesine izin verilir" diyen katı bir kurala bağlı kalırsınız.

Tutarlılık, ürününüzü daha kullanıcı dostu hale getirir; son derece kullanışlı bir ürün, daha fazla etkileşim ve satışa dönüşebilir.

3. Aynı Sistem Bileşenlerini Yeniden Kullanmak, Uygulamanızın Kullanımını Kolaylaştırır

Dil örneğinde olduğu gibi, tutarlılık anahtardır. Her bileşen kullanıcı tarafından bir kez anlaşıldığında, farklı bir bağlamda tekrar kullanıldığında, insanlar davranışına zaten aşina olacaktır. Kullanıcı etkileşimleri söz konusu olduğunda, bu tutarlılık ürünün genel kullanılabilirliğini iyileştirir.

Bileşen tabanlı bir tasarım sistemiyle çalışmak paradan tasarruf sağlar ve ayrıca bir ürünün güncellenmesini kolaylaştırır. Belirli bir durumda bir bileşenle ilgili kullanılabilirlik sorunu varsa, bu bir kez düzeltilebilir ve bu bileşenle ilgili diğer tüm olası sorunlar da güncellenecektir.

4. Bir Stil Rehberi, Uygulamanızın Uzun Vadede Daha Hızlı Geliştirilmesini Sağlar

Ekibiniz bir ekran için ortak bir bileşen geliştirirken, başka yerlerde de kullanacakları bir çözüm geliştiriyorlar. Bu, geliştirme süresinden tasarruf sağlar - birçoğu. Şirketiniz ölçeklendiğinde, bu, yeni bir ekran oluşturmak için gereken adam saatinin 10 katına kadar tasarruf anlamına gelebilir.

5. Bir Stil Rehberi Üretim Verimliliğini ve İnovasyonu Kolaylaştırır

Bir stil kılavuzu oluşturmak, tasarımları şirketin geri kalanı için daha erişilebilir ve hazır hale getirir. Geliştiriciler ve tasarımcılar bir fikri daha hızlı ve daha kolay bir şekilde prototipleyebilir. Bootstrap, geliştiricilerin çalışan bir prototip oluşturmasını kolaylaştırdığı için genellikle övülür; stil kılavuzunuz aynı amaca hizmet eder. Tasarım ekibinin önce ekranı oluşturmasına gerek kalmadan geliştiriciler tarafından oluşturulacak yeni bir kullanıcı arabirimi için bir referans temeli sağlar (tasarım ekibinin son ekranları QA yapmasına rağmen).

Bir Startup'ın Zorlukları, Akışta Bir Stil Rehberi

Başlangıç ​​ortamında bir tasarım sistemi oluşturmak, daha akıcı bir sürece alıştıkları daha olgun bir şirkette olabileceği kadar doğrusal değildir. Daha geleneksel bir şirkette, tasarım ekibi UX araştırması, fikir oluşturma ve denemeler yapar ve ardından nihai marka stil kılavuzunu bulur. Bu süreç her firmaya uymamaktadır. Startup'lar, vizyonlarının ve ürün gereksinimlerinin her zaman değişim içinde olduğu bir ortamda çalışır. Fikirlerini test etmek ve potansiyelini kullanıcılara göstermek için kullanılan MVP'ler (minimum uygulanabilir ürünler), uygulamalarının eksik sürümleriyle çalışırlar.

Bir stil kılavuzu oluşturmaya gelince, bu bir sorun haline gelebilir.

Sürekli gelişen bir ortamda, bir tasarımcı genellikle bir şekilde 'sabit' olması gereken bir stil kılavuzu oluşturmak için mücadele eder. Bir tasarımcı, uygulamanın bir sonraki sürümünde sonuçlanabilecek olsa bile, oluşturulan tüm bileşenleri derinlemesine düşünmek için zamana sahip olmayabilir. Facebook, biraz olgunlaştıklarında, ünlü bir şekilde hamburger menüsünü bir sekme navigasyonu için değiştirdi. Hamburger menüsünü oraya kim koymuşsa, onu da Facebook stil rehberine eklemiş midir?

Bir stil kılavuzu oluşturmanın henüz zamanının gelmediğini bile düşünebilirsiniz. Uzun vadede buna ihtiyacınız olacağını fark edebilirsiniz, ancak şu anda uygulamanın kullanılabilirlik testi için ekranları dışarı çıkarmak daha önemli. Ayrıca, uygulamanızı tanıtmak için bazı pazarlama sayfalarına da ihtiyacınız olacak. Aniden tasarımınızın hızlanması gerekiyor ve ekranlar oluştururken tasarımlarınızı ve şirket markasını tutarlı tutabilecek bir stil kılavuzuna sahip olmanın değerini görmeye başlıyorsunuz.

Sorun şu ki, istikrar için esneklik ticareti yapmanın doğru zamanının tam olarak ne zaman olduğunu bilmiyorsunuz. Stil kılavuzunu ne zaman başlatmanız gerektiğine ve ne zaman sadece ekran oluşturmaya odaklanmanız gerektiğine karar vermelisiniz. Ekranları teslim ederken aynı zamanda bir stil kılavuzu oluşturmak en uygun yaklaşım olabilir; bu şekilde her iki dünyanın da en iyisine sahip olabilirsiniz.

Bazı UI İlhamlarıyla Başlayın

Başlamak için iyi bir yol, özellikle tasarımcı değilseniz, beğendiğiniz tasarım stillerinden veya daha da önemlisi, kullanıcıların yanıt vereceğini düşündüğünüz örneklerden örnekler toplamaktır. Mümkün olduğu kadar çok örnek toplayın ve bunları bir klasöre/InVision panosuna/Niice panosuna/vb. koyun. Tasarım duyarlılığınızla birlikte referans ve ilham kaynağı olarak kullanılabilirler. Bir desen kitaplığı oluşturmak için bunları daha sonra oluşturabilirsiniz.

Örneğin, eğlence endüstrisinde sanatçıları tanıtan bir şirket için bir stil kılavuzu üzerinde çalışırken, açık veya koyu arka planların kullanıcılarımız üzerinde daha büyük bir etkisi olup olmayacağını merak ettik. Oyunlarda/filmlerde/görsel prodüksiyonda yüzlerce farklı web sitesine bakarak koyu ve açık renkli arka planları nasıl kullandıklarını gördüm.

En yaygın kalıpları vurguladığım bir referans sayfası hazırladım. Belirlediğim bir model, o sektördeki şirketlerin ürünlerini sunarken daha koyu arka planlar kullanma eğiliminde olmaları, ancak pazarlama çabalarında, e-ticaret ve mağazalarında beyaz arka plan kullanmalarıydı.

Bu kadar derine inmek zorunda değilsiniz, ancak görsel referanslara sahip olmanın yalnızca bir stil kılavuzu oluşturmada değil, aynı zamanda tasarlamanız gerekebilecek bazı kullanım durumlarını hatırlamada da yardımcı olduğunu gördüm. Topladığınız referanslar hakkında kendinizi iyi hissettiğinizde görsel tasarım üzerinde çalışmaya başlayabilirsiniz.

Katı UI Bileşenleri Tasarlayın

Başlangıçlarda çalışırken, en azından başlangıçta, sayfa oluşturmaktan daha bileşen oluşturmak daha zordur. Bir sayfa tasarladığınızda, genellikle nasıl kullanılacağına dair bir fikriniz olur. Bir bileşen tasarladığınızda durum böyle değildir. Belirli bir kullanım durumu için tasarlamaya çalışıyorsunuz, ancak bunun evrensel bir tasarım sisteminin parçası olmasını istiyorsunuz ve buna bu şekilde yaklaşmanız gerekiyor. Örneğin, üç düğmeli bir alt gezinme bileşeni oluşturmak isteyebilirsiniz. Ayrıca dört, beş veya on düğmeyle çalışması gerekebilir ve mobil, tablet ve masaüstünde çalışması gerekir. İleriyi düşünmelisin.

Bir bileşende belirli bir düzeyde kalıcılık veya kalıcı güç istiyorsunuz. Ortak bileşenler sık ​​sık değişmemeli ve ürününüzün birçok yerinde yeniden kullanılabilir olmalıdır. Örneğin, yalnızca bir iOS uygulamasıyla ilgileniyorsanız, bileşeninizi ekran boyutuna değil, seçeneklerin sayısına veya içeriğin uzunluğuna göre test etmek istersiniz. Buradaki fikir, uygulamanızın birçok yerinde kullanıcı arayüzünde geçerliyse, bunun stil kılavuzunuzun parçası olma potansiyeline sahip bir bileşen olduğunu bilirsiniz.

Bir girişimin neredeyse sıfırdan başlaması ve ardından hızla ilerlemesi gerekir. Patronunuz günün sonunda tasarlanmış bir ekran isteyebilir. Bu, bir stil kılavuzunun tamamını gerçekten geliştiremeyeceğiniz ve ardından ekranı bulamayacağınız anlamına gelir. Daha da kötüsü, şirketin vizyonu değiştiği için asla gün ışığına çıkmayacak bileşenlere sahip bir stil kılavuzu tasarlıyor olabilirsiniz. Dedikleri gibi, şimdi göndermek daha iyi.

Harika bir stil kılavuzu oluşturmak zaman alır ve tasarım sisteminizin temeli olacağından, onu doğru yapmak istersiniz. Bir başlangıç ​​ortamında, stil kılavuzunuz üzerinde her şeyi birbiri ardına sıralayarak çalışmanız gerekir.

Yaşayan Bir Belge Olarak Stil Rehberi

Stil rehberinizi devam eden bir çalışma olarak düşünmelisiniz. Stratejisini belirleyen bir girişim gibi, ilerledikçe stil kılavuzunuzu da anlayacaksınız. Arayüzünüzün temeli haline gelene kadar zaman içinde düzenleyecek ve ayarlayacaksınız. Yararlı bir yaklaşım, stil kılavuzunuzu başlattığınız anda ilk modeli başlatmaktır. En sevdiğiniz yazılımla iki dosya açın (benim durumumda Sketch); biri page name ve diğeri styleguide olarak adlandırılır. Ekran tasarımınız üzerinde çalışırken, tasarımınızı oluşturan öğelerle stil kılavuzunuzu oluşturmaya başlayabilirsiniz.

Bunlardan daha fazlasını yapmaya başladığınızda, bazı bileşenlerin stil kılavuzuna dahil edilmek için başlıca adaylar olduğunu erkenden fark edeceksiniz. Örneğin, bir simge stiline karar verdiyseniz, tüm simgeleriniz en baştan stil kılavuzuna gidebilir.

Genelde 'şimdiye kadar yapılan simgeler' adında bir bölüm oluştururum. Bir noktada birinin bir simgeye ihtiyacı varsa, yeni bir tane oluşturmadan önce bu bölümü kontrol etmeleri gerekir.

Göz önünde bulundurulması gereken diğer bariz öğeler renkler, düğmeler, seçiciler, başlıklar, başlıklar, gövde metni vb.'dir. Özellikle pazarlama için bir stil kullanıyorsanız, onu stil kılavuzunuza koymayı ve uygun şekilde etiketlemeyi düşünebilirsiniz. Belirli bir öğeye tamamen yerleşmediyseniz sorun değil. Tasarım sisteminizdeki UI öğelerini daha sonra fırsat doğduğunda iyileştirebilir ve kılavuzu uygun şekilde güncelleyebilirsiniz. Unutmayın, stil kılavuzu yaşayan bir belgedir , özellikle bir başlangıç ​​aşamasında.

Sonunda, kılavuza mizanpajlar koymaya başladığımda, tüm bileşenlerin son durumlarına yakın olması gereken bir noktaya gelmeye başladığımı biliyorum. Bu bölüm, stil kılavuzu oluşturma sürecindeki dönüm noktasını işaret ediyor - şimdi kutlayabilirsiniz! Böyle bir dönüm noktasını kutlamanın iyi bir yolu, stil kılavuzunun 1.0 sürümü için bir logo veya simge (adlandırmayı düşünün) oluşturmaktır.

Bazı insanlar logoyu/simgeyi çıkartma olarak basmaya kadar gider, böylece takımın bir tür kupası olur. Bu aynı zamanda, genellikle önce bu stil kılavuzunu açarak ve ardından yapılması gereken herhangi bir arayüz için yeni bir dosya oluşturarak kılavuzla çalışmanın daha geleneksel yoluna geri döndüğüm noktadır.

Çözüm

Bir tasarımcı olarak, mümkün olduğunca erken bir stil kılavuzu oluşturarak, girişiminizin daha yüksek bir kalite standardına bağlı kalmasını sağlarsınız. Zor olabilir, ama çabaya değer. Sağlam, çok yönlü bir stil kılavuzu, yalnızca daha iyi bir ürüne sahip olmanıza yardımcı olmakla kalmayacak, aynı zamanda geliştirme maliyetini düşürmenize de yardımcı olacaktır.

Hızlı kararların verildiği ve bazen tasarımların hızla değişmesi gereken hızlı tempolu bir ortamda bile bunu gerçekleştirmenin bir yolu var. Yukarıda açıklanan sürecin, herhangi bir startup'taki tasarımcıların karmaşıklık ve hızın zorluklarıyla başa çıkmasına yardımcı olurken aynı zamanda ürünün yararına sağlam bir stil kılavuzu oluşturmasına yardımcı olacağını umuyoruz.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır