Stil Kılavuzu Nasıl Oluşturulur: UI Çerçevesiyle Başlayın

AdRoll’un UX Designer’ında neden yaptığımız ve öğrendiklerimizle ilgili sorular

Bu blog yazısı, stil rehberinin yaratımından başlayarak, ekiplerimiz için olgun bir UI çerçevesi sağlamaya ve sonunda ürünlerimiz için benzersiz bir ses ve tonu damıtmaya giden yolculuğunu kronikleştiren bir seridir.

Merhaba! Ben AdRoll’da UX Araştırmacısı Arya Srinivasan. AdRoll’un yerel reklam API ürününde çalışan bir UX Tasarımcısı Mason Lee’ye oturdum, AdRoll’un stil rehberini geliştirdiği çalışmaları hakkında konuştum.

Arya: İşleri başlatmak için neden stil rehberi projesine başladın? Çözülmesi gereken sorun neydi?

Mason: Sorun, hem ürünler arasında hem de tek bir ürün içinde tasarım tutarsızlığıydı. Örneğin, her yerde aynı görünmesi gereken ancak aslında renk, yazı tipi ağırlığı ve kenarlık stiline göre değişen bir düğme.

Düğmeler, bireysel tasarımcıların alaylarında ve uygulamalarımızda farklı görünüyor.

AdRoll’un hızlı büyümesi, hıza odaklanmamız anlamına geliyordu. Artık birden fazla ürüne sahip daha büyük bir şirketiz, bu yüzden bir tasarımcı olarak, ürünlerimizi nasıl sunduğumuzdaki tutarlılığı vurgulamanın bizim için önemli olduğuna inanıyorum: tasarım yoluyla.

Tasarıma odaklanmak için önce mevcut tutarsızlıkları gidermemiz gerekiyordu. Buradaki UX tasarımcıları tipik olarak bir veya iki ürüne odaklanır, bu nedenle ekibimizin tüm ürünlerdeki tasarım hakkında düşünmesini sağlamak için, UI kurallarını tartışmak üzere haftalık bir “UI Smackdown” toplantısı düzenledim.

Her toplantıda, tek bir tasarıma karar vermek için tasarım tutarsızlıklarına baktık. Birkaç toplantıdan sonra, tasarımcılar hala doğru renk veya dolguyu vb. Eksik bir bileşen olduğunu fark ettiğimizde veya yeni bir bileşen eklemek istediğimizde, onu tartışır ve ana UI Framework dosyasına ekleriz.

Arya: AdRoll'un tasarım merkezli bir şirket olmasını istediğinden bahsetmiştin - bununla ne demek istiyorsun?

Mason: AdRoll'un tasarımı ön plana koymasını istiyorum, böylece müşteriler tarafından ihtiyaçlarını gerçekten iyi bir şekilde çözen iyi tasarlanmış bir ürün olarak tanınır.

Arya: Stil rehberi için acil hedefleriniz nelerdi? Bu proje için daha uzun vadeli bir vizyonunuz var mı?

Mason: Kısa vadeli hedefim, UI bileşenlerimizi standartlaştırarak, tasarımcılar arasında tasarım tutarlılığı sağlamak. Tasarım yaparken tasarımcının aynı dili konuşmasını istiyorum. Örneğin, modal veya açılır bir konumda, mühendisler tasarımcının önerdiği şekilde inşa eder. Tasarım öğeleri tasarımcılar arasında farklıysa, mühendisler aynı öğeyi farklı şekillerde yapacaklardır.

Orta vadeli hedefim, bu tarzın AdRoll’un dahili kullanıcı arayüzü bileşen kütüphanesinde “RollUp” kodumuzda tanımlanmış olmasıdır. Önceden tanımlanmış bir stil sayfamız varsa, tüm mühendislerimizin yapması gereken kopyalamaktır. Tasarımcılar ve mühendisler aynı dili konuşabilir.

Arya: Stil rehberini yaratırken herhangi bir problem yaşadın mı? Onları nasıl çözdün?

Mason: En büyük engellerden biri, ürün ekibindeki insanlardan giriş almasıydı. Herkesin katılımını sağlamak için, ele alınacak gündem maddelerinin bir listesini içeren bir toplantı hazırladım. Ürünler arasında değişen açılır menüler gibi tasarım tutarsızlıkları sundum. Görsel kanıtlar sunmak konuşmaları tetikler ve sonunda insanlar ürünlerine değer verir ve tutarlılık isterler.

Bir başka zorluk da kurallara karar vermekti. Bir bileşeni standartlaştırma hakkında konuşurken, her bağlamda, her bağlamda uygulanabilir olmalıdır. Her kenar vakasını düşünmelisin. Bileşenin esnek olması gerekir, ancak aynı zamanda, özellik yeterince tamamlanmış, böylece kolayca kullanılabilir, tüketilebilir ve uygulanabilir.

Stil rehberimizin esnekliğine bir örnek. Bu coğrafi hedefleme açılır listesindeki dolgu için ilk kararımız çok büyüktü, bu nedenle bu kullanım durumunun hesaba katılması için stil rehberini revize ettik.Önce (solda), Sonra (sağda)

Aslında bir tane daha meydan okumak istiyorum! Adlandırma zor olabilir. Daha önce de söylediğim gibi, tasarımcıların ve mühendislerin aynı dili konuşmasını istiyorum, ancak bunun dikkatlice yapılması gerekiyor. Bir açılır pencere kadar basit olan bir şey için, aslında birkaç farklı varyasyonumuz var (biri onay kutuları, biri onay kutuları ve bir metin bloğu diğeri de standart bir açılır menü). Üç farklı açılır menüyü nasıl isimlendiririz ki hangisinin hangisi olduğuna dair evrensel bir anlayış vardır?

Anlambilim zorlu; bizim ismimizin mantıklı olması gerekiyor. Bir isme karar verirken fikir birliği sağlamak için harika işbirliği araçlarını kullandık. Örneğin, Wake tüm açık soruları ve sorunları toplamamıza, çözümleri tartışmamıza, UI Smackdown kararlarını izlememize ve Slack ile bir entegrasyon yoluyla daha büyük ürün ekibiyle konuşmaya devam etmemize yardımcı oldu.

UI tutarsızlıklarını tartışmak ve bileşen kuralları üzerinde işbirliği yapmak için Wake'i nasıl kullandık.

Arya: AdRoll’un kullanıcı arayüzünde, stil kılavuzunu oluştururken göz önünde bulundurmanız gereken benzersiz bir şey var mı?

Mason: Kontrol panelimiz çok veri ağırlıklı. Ayrıca, kampanya oluşturma akışı, reklamverenlere çekmeleri gereken bir miktar kaldıraç sunar. Daha az deneyimli reklamverenlerin gereksinimlerini karşılamak için etkili varsayılan ayarlara sahip olmayı hedefliyoruz. Ürünlerimizde, bileşenlerin karmaşık işlevleri vardır, ancak basit görünürler ve kullanımı kolaydır.

Arya: Stil rehberini yaratmaya başladığında bilmeni istediğin şeyler var mı?

Mason: Keşke tüm ürünlerimizin en baştan nasıl çalıştığını daha iyi anlayabilseydim. Örneğin, haftalık ürün eleştirisi toplantımızda, ilgili ürünümüzün çalışma şeklini paylaşıyoruz, bu nedenle SendRoll'un (e-posta yeniden hedefleme ürünümüz) yüzeyde nasıl çalıştığını biliyorum, ancak tasarımcının yaptığı SendRoll hakkında derin bilgiye sahip değilim. Stil kılavuzunda çalışırken ürünün nüanslı anlayışının kesinlikle yardımcı olduğunu düşünüyorum, çünkü daha sonra tüm potansiyel kullanım durumlarını daha iyi anlıyorum.

Arya: Bir tasarımcının süreci ve ürünleri hakkında ortak bir anlayışa ulaşmanın en iyi yolu nedir?

Mason: Ürünlerimizi gerçekten nakliye etmeye odaklansak da, haftalık tasarım eleştirisi toplantımızda tasarım sürecimizi paylaşmak için iyi bir iş çıkarıyoruz. Her toplantıdan sonra döngüyü kapatmak konusunda daha iyi olabileceğimizi düşünüyorum - tasarımcı toplantıdan gelen geribildirimleri nasıl birleştirdi? Ürün, reklamverenlerimiz tarafından gönderilip kullanıldığında, reklamverenlerin, analitiklerin öngördüğü bilgilere göre ürünleri nasıl kullandıklarını da paylaşabiliriz.

Arya: Bu proje üzerinde çalışırken bahsettiğiniz kaynak var mıydı?

Mason: Atom Tasarımını Brad Frost tarafından okudum, çevrimiçi araştırdım ve MeetUps'taki diğer UX tasarımcılarıyla konuştum. Belirli bir şirketin iyi tasarım uygulamaları yaptığını düşünüyorsanız, çevrimiçi bir yerde stil rehberlerinden bahsettikleri büyük olasılıkla.

Arya: Stil rehberimizin durumu nedir?

Mason: Farklı ürünlerimizde kullandığımız tüm UI öğelerini yakalayıp tekrar ziyaret ettim ve UI tasarımlarımız için gerçeğin kaynağı olacak temelleri, bileşenleri, kalıpları ve sayfaları gruplandırdım.

Temel ve bileşen UI öğelerini Dribbble üzerinde kontrol edebilirsiniz. Atom Tasarımına aşina iseniz, “atom” ve “molekül” seviyelerini “bileşenler” olarak adlandırdığım gruba gruplandırdım. Örneğin, form başlığını ve girişi birleştirmek diğer tasarımcıların tamamlanmış bir formu kolayca kopyalamasını kolaylaştırır alan.

Okuduğunuz için teşekkürler!

Stil rehberimizi geliştirirken şu konulara dikkat edin:

  • UI Çerçevesi işbirliğini nasıl kolaylaştırır?
  • UI Çerçevesi'ne dayalı yeni stil sayfaları geliştirmek
  • Stil Kılavuzu web sitesi nasıl oluşturulur
  • Ses ve Tonumuzu bulma yolculuğu