Görsel Dil Oluşturmak

Görsel Dil Oluşturmak

• 1. Görsel Dil Oluşturmak Görsel Dil Oluşturmak Yeni Tasarım Sistemi Airbnb
• 2. Görsel Dil Oluşturmak Görsel Dil Oluşturmak Görsel dil başka bir dil gibidir. Yanlış anlama, dili kullanan herkes tarafından paylaşılmadığı ve anlaşılmadığı takdirde ortaya çıkar. Bir ürün ya da ekip büyüdükçe, bu modalitelerdeki zorluklar birleşir. Tasarım, her zaman büyük ölçüde sistemler ve ölçeklenebilir , tekrarlanabilir bir şekilde ürünler yaratılabildi. Pantone renklerinden Philips vidalarına kadar, bu sistemler kaos yönetimini ve daha iyi ürünler üretmemizi sağlıyor. Dijital ürünler belki de bu sistemleri uygulamak için en verimli zemin niteliğindedir ve çoğu zaman öncelikli sayılmamaktadır. Daha iyi ve hızlı bir şekilde inşa etmek için birleşik bir tasarım sistemi gereklidir; çünkü uyumlu bir deneyim, kullanıcılarımız tarafından daha kolay anlaşılır ve daha hızlı çalışmamız için bize ortak bir dil verir.
• 3. Neden Tasarım Sistemlerine İhtiyacımız Var? Neden Tasarım Sistemlerine İhtiyacımız Var? Airbnb yıllar boyunca çok fazla büyüme yaşadı. Şu anda tasarım departmanımız yaklaşık bir düzine fonksiyon ve sonuç takımlarından oluşmaktadır. Kolektif çabalarımızı yönlendirmek ve güçlendirmek için daha sistematik yollara ihtiyacımız olduğu ortaya çıktı.
• 4. Çok Az Kısıtlama Çok Az Kısıtlama Yazılım tasarımı, diğer tasarım disiplinlerine kıyasla çok az fiziksel kısıtlamaya sahiptir. Bu, verilen herhangi bir sorun için çeşitli çözümlere izin verir, ancak aynı zamanda, kullanıcılara ayrılmış deneyimlere de açar. Ürün sahipleri ve tasarımcılar olarak, kendi kısıtlarımızı oluşturmalı ve takip etmeliyiz.
• 5. Birden Çok Tasarımcı Ve Paydaş Birden Çok Tasarımcı Ve Paydaş Yazılım genellikle ekipler tarafından - bazen inanılmaz derecede büyük takımlar - insanlar tarafından üretilir. Uyumlu deneyimler oluşturma zorluğu, daha fazla kişi karışıma eklendikçe katlanarak çoğalır. Ayrıca zamanla, bir takım ne kadar tutarlı veya küçük olursa olsun, farklı insanlar yeni çözümler ve stillere katkıda bulunacak ve deneyimlerin farklılaşmasına neden olacaktır.
• 6. Platformların Çokluğu Platformların Çokluğu Ürünümüzü çok sayıda platform ve cihazda göndermemiz gerekiyor. Senkronize edilmiş özelliklerin ve tasarımların tutulması, çoğu zaman aynı platformun tümünde tekrarlanması için aynı işi gerektiren büyük çaba gerektirir.
• 7. Bir Süreklilik Olarak Yazılım Bir Süreklilik Olarak Yazılım Yazılımla ilgili bir başka benzersiz şey de, bir ürün olarak düşünülebilirken, gerçekten de tükenmiş ve geleneksel tüketici ürünleri gibi değiştirilemez. Yıllar önce yaratılan kodlar ve tasarımlar, bir şirketin peyzajı ve ürününün önemli ölçüde değişmesinden sonra bile birçok yerde hala mevcut. Bu sürekli bakım ve yükseltme gerektirir.
• 8. İşe Başlamak İşe Başlamak Airbnb HQ'nun hemen dışında bir harici stüdyo yeri ayırdık ve Design Language System'i (DLS) tasarlamaya ve oluşturmaya adadık. DLS için belirlediğimiz hedef daha güzel ve erişilebilir bir tasarım dili yaratmaktı. Tasarımlarımız, iyi tanımlanmış ve yeniden kullanılabilir bileşenlerle daha fazla verimlilik sağlayan birleşik platformlar olmalıdır. Çabalarımızı yoğunlaştırmak için ilk kapsamı, önce yerel platformlarda (iOS ve Android) sistem oluşturmaya indirdik. Eski ve yeni tasarımlarımızın çoğunu denetleyerek ve basarak başladık. Akışları bir tahtada yan yana bırakarak, deneyimlerin nerede ve nasıl kırıldığını ve değişiklik yapmaya başlamak için nereye ihtiyacımız olduğunu görebiliriz.
• 9. İşe Başlamak İşe Başlamak Başlamanın en iyi yolunun başa çıkma sorunlarıyla uğraştığını düşündük. Her birimiz yeniden tasarlanacak bir ekran veya ürün alanına odaklandık ve bu bireysel tasarımlarda bize rehberlik edecek birkaç ilke belirledik: •Birleşik (Unified) : Her bir parça daha büyük bir bütünün parçasıdır ve sisteme ölçeğe olumlu katkıda bulunmalıdır. İzole özellikler veya aykırı değerler olmamalıdır. •Evrensel (Universal) : Airbnb, dünya çapında geniş bir küresel topluluk tarafından kullanılıyor. Ürünlerimiz ve görsel dilimiz davetkar ve erişilebilir olmalıdır. •İkonik (Iconic) : Hem tasarım hem de işlevsellik söz konusu olduğuna odaklandık. İşimiz bu odağa cesurca ve net bir şekilde konuşmalı. •Konuşkan (Conversational): Hareket kullanımımız, ürünlerimizi hayata geçirir ve kullanıcılarla kolay anlaşılır yollarla iletişim kurmamızı sağlar.
• 10. Temel Atmak Temel Atmak Bu tasarım sprintine başlamadan önce, temeli aradığımız temel bir stil rehberi oluşturduk. Bu temel, tipografimizi, renkleri, simgeleri, boşlukları ve bilgi mimarisini gevşek bir şekilde tanımlamıştır. Kolektif çalışmalarımızı her gün sonunda gözden geçirerek, kalıpların ortaya çıkmaya başladığını gördük. Gerektiğinde rotaları düzelttik ve standart bileşenlerimizi tanımlamaya başladık.
• 11. Bileşenleri Yaratmak Bileşenleri Yaratmak Geleneksel olarak birçok stil kılavuzları, bileşenleri daha karmaşık moleküller oluşturmak için kullanılan atomik bileşenler olarak tanımlar. Teoride, bu tutarlı ve esnek sistemler oluşturmak için iyi çalışır. Bununla birlikte, pratikte, çoğu kez, tekrar kullanılabilen bu atomların, her türlü molekülün oluşturulmasına izin veren, birçok farklı yoldan kullanılmasıdır. Yine bu, her türlü ayrık deneyime kapı açar ve sistemi korumak zorlaştırır. Tek tek atomlara güvenmek yerine, bileşenlerimizi canlı bir organizmanın öğeleri olarak ele almaya başladık. Bir işleve ve kişiliğe sahiptirler, bir takım özellikler tarafından tanımlanırlar, başkalarıyla birlikte olabilirler ve bağımsız olarak gelişebilirler.
• 12. Bileşenleri Yaratmak Bileşenleri Yaratmak üBirleşik bir tasarım dili sadece bir dizi statik kural ve bireysel atomlar değil, aynı zamanda gelişen bir ekosistem olmalıdır. Örneğin, kullanıcı avatar unsurumuz başlangıçta bir stil kılavuzu tarafından tanımlanabilir, ancak platformdaki son kullanımı yüzlerce izin alabilir ve bu da avatar öğesinin yol boyunca başarılı bir şekilde güncellenmesini zorlaştırabilir. Bunlardan herhangi birini değiştirmek istiyorsak, diğer ekranları kırmadığımızdan emin olabiliriz. •Her bileşen, zorunlu öğeler (başlık, metin, simge ve resim gibi) tarafından tanımlanır ve bazen isteğe bağlı öğeler içerebilir. Bu öğeler hem Sketch belgesinde hem de kodda tanımlanmıştır. Ayırıcı çizgilerinin kendilerine izin vermek yerine, her bir bileşenin bir ayırıcıya sahip olmasını gerektiririz, bu da görüntü mantığına göre görünür veya gizlenir.
• 13. Kütüphaneyi Derlemek Kütüphaneyi Derlemek Bu bileşenleri oluştururken, bunları tasarım süreci boyunca bahsettiğimiz kütüphane adı verilen bir ana dosyada topladık. Bir ya da iki hafta sonra, tasarımları tekrarlarken kütüphaneyi kullanarak üretkenlikteki büyük sıçramaları görmeye başladık. Bir gün, bir son dakika prototipini bir araya getirirken ekibimiz, kütüphanemizin sağladığı çerçeveyi kullanarak sadece birkaç saat içinde yaklaşık 50 ekran oluşturabildi. Kütüphane büyürken, benzer öğeleri içeren çalışma yüzeylerine bireysel bileşenler düzenlemeye başladık.
• 14. Kütüphaneyi Derlemek Kütüphaneyi Derlemek Bu bileşenler için bir dizi telefon (iOS ve Android) oluşturduk ve bunları tablet boyutlarına göre uyarladık. Tablet bileşenleri büyük ölçüde mobil cihazlar için olanla aynıdır ve teknik bir seviyede kod sadece iki farklı stilde bir kez var olmalıdır. Bu sistem sayesinde bileşenler, web tasarımı için duyarlı tasarıma benzer şekilde, görünüm ve konumlarına göre değişebilir.
• 15. Kütüphaneyi Derlemek Kütüphaneyi Derlemek Tasarımcılar daha sonra ortak bileşenleri kullanarak bir ekran tasarlayabilir ve farklı ekran boyutlarına ve iOS ve Android'e kolayca uyarlanabilir. Tablet için, sayfadaki içeriği, modalar, 2 sütun ve ızgara düzenlerini odaklayan Focus Views gibi birkaç basit düzen konsepti oluşturduk. Tüm bileşenler ve görüşler, bu tarzları, durumları ve uyarlanabilirliği ele alan kendi teknik görüş çerçevemiz ile oluşturulmuştur.
• 16. Sonuç Sonuç •Tasarım dili ve kodu çoğu kez paylaşıldığından, artık tüm yerel platformlardaki özellikleri hemen hemen aynı anda oluşturabilir ve yayınlayabiliriz. •Ürün mühendisleri daha çok görüntüleme kodundan ziyade özellik mantığına daha fazla odaklanabileceğinden, geliştirme genellikle daha hızlıdır. Ayrıca, mühendisler ve tasarımcılar artık ortak bir dili paylaşıyor. •Ürün gözden geçirmelerinin, dolgu, renk ve yazı tipi tercihleri yerine bir tasarımın gerçek kavram ve deneyimlerine odaklanmasını sağlar. •DLS bize görsel stilimizin ortak bir anlayışını sunar ve tek bir sisteme katkıları kolaylaştırır. •Bu sistem aynı zamanda, hepimizin yüksek doğrulukta fikirleri daha hızlı ve daha düşük maliyetle prototip ve deneysel olarak deneyebilmelerini sağlar.
• 17. Dipnotlar Dipnotlar Dosya güncelleme işlemini kolaylaştırmak için git / github'u da kullanıyoruz. Ana kitaplık taslağımıza manuel olarak yeni bileşenler oluşturup ekliyoruz ve değişiklik taleplerini belgeleyen bir değişim günlüğü ve üretilen png dışa aktarma isteklerini gönderiniz. Bundan sonra, Sketch (eskiz) dosyası Sketch (Eskiz) şablonlarına bağlı olan bir paylaşılan Box klasörüne girer, böylece herkesin yeni bileşenlere hemen erişimi vardır.
• 18. Kaynakça Kaynakça •https://airbnb.design/building-a-visual-language/