Kodla Tasarım: Tasarıma Modern Bir Yaklaşım (Geliştirme Zorlukları)

Bu makale, misyonu tasarım ve mühendisliği daha iyi, daha hızlı ürün geliştirme dünyasında birleştirerek en iyi kullanıcı deneyimlerini sağlamak olan UXPin'deki sevgili arkadaşlarımız tarafından desteklenmiştir. Teşekkür ederim!

Tasarımcılar ve geliştiriciler arasındaki işbirliğindeki sürtüşme, endüstrinin kendisi kadar eski, sürekli gelişen bir tartışmayı körüklüyor. Bugün bulunduğumuz yere uzun bir yoldan geldik. Araçlarımız değişti. Süreçlerimiz ve metodolojilerimiz değişti. Ancak altta yatan sorunlar genellikle aynı kaldı.

Ekibin türü ve boyutu ne olursa olsun, sıklıkla karşılaştığım yinelenen sorunlardan biri güvenilir bir gerçek kaynağı sağlamaktır . En iyi insanları işe almak ve endüstri standardı kanıtlanmış çözümleri kullanmak bile çoğu zaman bir şeylerin kesinlikle daha iyi yapılabileceği konusunda bizi tiksindiriyor. Kötü şöhretli "son sürüm" genellikle teknik belgelere, tasarım dosyalarına, elektronik tablolara ve diğer yerlere yayılır. Hepsini senkronize halde tutmak genellikle sıkıcı ve göz korkutucu bir iştir.

Not : Bu makale UXPin ekibi ile işbirliği içinde yazılmıştır. Bu makalede sunulan örnekler UXPin uygulamasında oluşturulmuştur. Bazı özellikler yalnızca ücretli planlarda mevcuttur. UXPin'in fiyatlandırmasının tam özetini burada bulabilirsiniz.

Tasarım Araçları ile İlgili Sorun

Bir gerçeğin kaynağını korumaktan bahsetmişken, tasarım araçlarının verimsizliği çoğu zaman en çok yıpratıcı noktalardan biri olarak gösteriliyor. Modern tasarım araçları gelişiyor ve muazzam çabalarla hızla gelişiyor. Ancak iş tasarım ve geliştirme arasında bir köprü kurmaya geldiğinde, bu çabaların çoğunun kusurlu varsayımlara dayandığı izlenimini almak nadir değildir.

Modern tasarım araçlarının çoğu, tasarımları daha sonra uygulamak için kullanılan teknolojilerden farklı modellere dayanmaktadır. Grafik düzenleyiciler olarak oluşturulurlar ve bu şekilde davranırlar. Tasarım araçlarında mizanpajların oluşturulma ve işlenme şekli, sonuçta CSS, JavaScript ve diğer programlama dillerinin sunduğundan farklıdır. Vektör (hatta raster) grafikleri kullanarak kullanıcı arayüzleri oluşturmak, yaptığınız şeyin daha sonra nasıl koda dönüştürüleceğine ve nasıl dönüştürüleceğine dair sürekli bir tahmin işidir.

Tasarımcılar genellikle tasarımlarının amaçlandığı gibi uygulanmadığından yakınırlar. Mükemmel piksel tasarımlarına yönelik en cesur çabalar bile tüm sorunları çözmez. Tasarım araçlarında, olası tüm durumları hayal etmek ve kapsamak imkansıza yakındır. Farklı durumları desteklemek, kopyayı değiştirmek, çeşitli görüntü alanı boyutları, ekran çözünürlükleri vb., hepsini kapsayacak çok fazla değişken değişken sağlar.

Bunun üzerine bazı teknik kısıtlamalar ve sınırlamalar gelir. Önceden geliştirme deneyimi olmayan bir tasarımcı olarak, tüm teknik faktörleri hesaba katmak son derece zordur. Tüm olası giriş durumlarını hatırlayın. Tarayıcı desteğinin sınırlamalarını anlayın. Çalışmanızın performans sonuçlarını tahmin edin. Erişilebilirlik için tasarım, en azından bir anlamda renk kontrastı ve yazı tipi boyutlarından çok daha geniş. Bu zorlukların farkında olarak, bir miktar varsayımı gerekli bir kötülük olarak kabul ediyoruz.

Ancak geliştiricilerin çoğu zaman tahminlere de güvenmeleri gerekir. Grafik editörleriyle alay edilen kullanıcı arayüzleri, nadiren tüm sorularına cevap verir. Zaten sahip olduğumuz bileşenle aynı bileşen mi, değil mi? Onu farklı bir durum olarak mı yoksa ayrı bir varlık olarak mı ele almalıyım? Bu tasarım X, Y veya Z olduğunda nasıl davranmalıdır? Daha hızlı ve daha ucuz olacağı için biraz farklı yapabilir miyiz? İronik olarak, tasarımları en başta kimin yarattığını sormak her zaman yardımcı olmuyor. Nadiren değil, onlar da bilmiyorlar.

Ve genellikle, artan hayal kırıklığının kapsamının bittiği yer burası değildir. Çünkü o zaman, başka herkes de var. Yöneticiler, paydaşlar, ekip liderleri, satış görevlileri. Dikkatleri ve zihinsel kapasiteleri, ürünün çeşitli parçalarının yaşadığı tüm araçlar ve yerler arasında ince bir şekilde gerildiğinden, onu iyi bir şekilde kavramak için herkesten daha fazla mücadele ederler.

Prototiplerde gezinmek, tasarımlarda neden bazı özelliklerin ve durumların eksik olduğunu anlamak ve neyin eksik, neyin devam etmekte olduğu ve neyin bilinçli olarak kapsam dışında bırakıldığını ayırt etmek neredeyse imkansız geliyor. Halihazırda yapılmış olanı hızlıca tekrarlamak, geri bildiriminizi görselleştirmek ve kendi fikirlerinizi sunmak da pek mümkün görünmüyor. İronik olarak, giderek daha karmaşık araçlar ve süreçler, tasarımcıların ve geliştiricilerin birlikte daha iyi çalışmasına yöneliktir ; çıtayı daha da yükseltiyorlar ve diğer insanlar için süreçlere aktif katılım daha da zorlaşıyor.

Çözümler

Sektörümüzün sayısız başkanı, yeni paradigmalar, araçlar ve kavramlarla sonuçlanan bu sorunların üstesinden gelmek için çalıştı. Ve gerçekten de daha iyisi için çok şey değişti. Şimdi kısaca bir göz atalım ve ana hatlarıyla belirtilen zorluklara yönelik en yaygın yaklaşımlardan bazılarına bakalım.

Kodlama Tasarımcıları

“Tasarımcılar kodlamalı mı?” makaleler, konferans konuşmaları ve diğer tüm medya aracılığıyla sayısız kez tartışılan klişe bir sorudur ve tartışmada yeni seslerle ara sıra istikrarlı bir düzenlilik ile ortaya çıkar. Tasarımcılar “kodlamayı bilseler” (ilk etapta “kodlamayı bilmenin” nasıl tanımlanacağı üzerinde durmayalım bile), teknolojik gelişmeleri alan tasarımlar yapmanın onlar için daha kolay olacağına dair yaygın bir varsayım vardır. kısıtlamalar göz önünde bulundurulur ve uygulanması daha kolaydır.

Bazıları daha da ileri giderek uygulamada aktif rol almaları gerektiğini söyler. Bu aşamada, tasarım araçlarını tamamen atlayıp sadece “kodla tasarım” yapmanın anlamsız olmayacağı sonucuna varmak kolaydır.

Fikir kulağa cazip gelse de, gerçekte nadiren kendini kanıtlar. Tanıdığım tüm en iyi kodlama tasarımcıları hala tasarım araçlarını kullanıyor. Ve bu kesinlikle teknik beceri eksikliğinden kaynaklanmıyor. Fikir oluşturma, eskiz yapma ve gerçek şeyi inşa etme arasındaki farkı vurgulamanın neden önemli olduğunu açıklamak.

"Kodda tasarlama" için, tasarım araçlarıyla kendinizi hiç rahatsız etmeden hızlı bir şekilde tamamen işlevsel bir arayüz oluşturmak için önceden tanımlanmış stilleri ve bileşenleri kullanmak gibi birçok geçerli kullanım durumu olduğu sürece, tasarım araçları tarafından sınırsız görsel özgürlük vaadi sunulmaktadır. hala yadsınamaz bir değere sahiptir. Birçok kişi, yeni fikirleri tasarım araçlarının sunduğu bir biçimde daha kolay ve yaratıcı bir sürecin doğasına daha uygun buluyor. Ve bu yakın zamanda değişmeyecek. Tasarım araçları kalıcı olmak ve kalıcı olmak için buradalar.

Tasarım Sistemleri

Dijital tasarım dünyasının son yıllardaki en büyük moda sözlerinden biri olan tasarım sistemlerinin büyük misyonu, her zaman tam olarak şu olmuştur: tahminde bulunmayı ve tekrarı sınırlamak, verimliliği ve sürdürülebilirliği artırmak ve gerçeğin kaynaklarını birleştirmek. Fluent veya Material Design gibi kurumsal sistemler, fikrin savunulması ve konseptin hem büyük hem de küçük oyuncular arasında benimsenmesine ivme kazandırmak için çok fazla ayak işi yaptı. Ve gerçekten de tasarım sistemleri daha iyiye doğru çok şeyin değişmesine yardımcı oldu. Tanımlanmış bir tasarım ilkeleri, desenleri ve bileşenleri koleksiyonu geliştirmeye yönelik daha yapılandırılmış bir yaklaşım, sayısız şirketin daha iyi, daha sürdürülebilir ürünler oluşturmasına yardımcı oldu.

Yine de bazı zorluklar hemen çözülmemişti. Popüler tasarım araçlarında tasarım sistemleri tasarlamak, birçok kişinin tek bir hakikat kaynağına ulaşma çabalarını engelledi. Bunun yerine, birleşik olmasına rağmen hala iki ayrı, uyumsuz kaynakta var olan çok sayıda sistem oluşturuldu: bir tasarım kaynağı ve bir geliştirme kaynağı. İkisi arasında karşılıklı denkliği korumak, genellikle, tasarım sistemlerinin çözmeye çalıştığı en nefret edilen acı noktalarını tekrarlayarak, acı verici bir angarya olduğunu kanıtlıyor.

Tasarım ve Kod Entegrasyonları

Tasarım sistemlerinin sürdürülebilirlik sorunlarını çözmek için yakında başka bir çözüm dalgası geldi. Tasarım belirteçleri gibi kavramlar çekiş kazanmaya başladı. Bazıları, belirli değerlerin doğrudan tasarım dosyalarından alınmasına izin veren açık API'ler gibi, kod durumunu tasarımlarla senkronize etmek içindi. Diğerleri, tasarımları kodla senkronize etmeye yönelikti, örneğin tasarım araçlarında koddan bileşenler üreterek.

Bu fikirlerin çok azı yaygın bir şekilde benimsendi. Bu, büyük olasılıkla, hala son derece kusurlu çözümlerin gerekli giriş maliyetleri üzerindeki olası faydaların şüpheli avantajından kaynaklanmaktadır. Tasarımları otomatik olarak koda çevirmek, çoğu profesyonel kullanım senaryosu için hala büyük zorluklar doğuruyor . Mevcut kodu tasarımlarla birleştirmenize izin veren çözümler de ciddi şekilde sınırlandırılmıştır.

Örneğin, kodlanmış bileşenleri tasarım araçlarına aktarmanıza izin veren çözümlerin hiçbiri, görsel olarak kaynağa uygun olsa bile, bu tür bileşenlerin davranışını tam olarak kopyalayamaz. Şimdiye kadar hiçbiri.

Tasarım ve Kodu UXPin ile Birleştirme

Olgun ve tam özellikli bir tasarım uygulaması olan UXPin, tasarım araçları sahnesinde yeni bir oyuncu değil. Ancak, Merge teknolojisi gibi son gelişmeleri, tasarım ve geliştirme araçları hakkındaki düşüncelerimizi değiştirebilecek şeylerdir.

Merge teknolojisine sahip UXPin, tek bir kod satırı yazmadan hem görsellerini hem de işlevselliğini koruyarak gerçek, canlı bileşenleri tasarıma getirmemize olanak tanır. Bileşenler, tasarım dosyalarına gömülü olsalar bile, tam olarak gerçek karşılıkları gibi davranacaktır - çünkü onlar gerçek karşılıklarıdır. Bu, yalnızca kod ve tasarım arasında kusursuz bir parite elde etmemize değil, aynı zamanda ikisini kesintisiz senkronizasyonda tutmamıza da olanak tanır.

UXPin, git depolarında depolanan React bileşenlerinin tasarım kitaplıklarının yanı sıra, neredeyse tüm popüler ön uç çerçevelerden bileşenlerin kullanılmasına izin veren Storybook ile sağlam bir entegrasyonu destekler. Kendiniz denemek isterseniz, UXPin web sitesinde buna erişim talebinde bulunabilirsiniz:

• Birleştirme teknolojisi ile UXPin'e erişim talep edin →

UXPin'de canlı bileşenleri tasarımlarla birleştirmek şaşırtıcı derecede az adım alır. Doğru bileşeni bulduktan sonra, bir tıklama ile tasarım tuvaline yerleştirebilirsiniz. Tasarımlarınızdaki diğer herhangi bir nesne gibi davranacaktır. Onu özel yapan şey, tasarımların ayrılmaz bir parçası olmasına rağmen, onu artık kodda olduğu gibi kullanabilir ve özelleştirebilirsiniz .

UXPin, bileşenin özelliklerine erişmenizi, değerlerini ve değişkenlerini değiştirmenizi ve onu kendi verilerinizle doldurmanızı sağlar. Prototip başlatıldığında, bileşen tüm davranışları ve etkileşimleri koruyarak tam olarak beklendiği gibi davranacaktır.

Tasarımlarınızda sınırsız sayıda kitaplık ve tasarım sistemini karıştırıp eşleştirebilirsiniz . Kendi kitaplığınızı eklemenin yanı sıra Material Design, Fluent UI veya Carbon gibi kullanıma hazır çok çeşitli açık kaynaklı kitaplıklar arasından seçim yapabilirsiniz.

Bir bileşeni "olduğu gibi" kullanmak, aynı zamanda, görünümün genişliği gibi bağlam değişikliğine göre davranması gerektiği anlamına gelir. Başka bir deyişle, bu tür bileşenler tamamen duyarlı ve uyarlanabilir.

Not : UXPin ile gerçekten duyarlı tasarımlar oluşturma hakkında daha fazla bilgi edinmek isterseniz, bu makaleye göz atmanızı şiddetle tavsiye ederim.

Bağlam aynı zamanda tema anlamına da gelebilir. Bir tasarım aracında temaya uygun bir tasarım sistemi oluşturmaya (ve sürdürmeye!) kim çalıştıysa veya en azından açık ve koyu tema arasında kolayca geçiş yapmanızı sağlayan bir sistem oluşturmaya çalıştıysa, bunun ne kadar zor ve kusurlu bir görev olduğunu bilir. sonuçlar genellikle. Tasarım araçlarının hiçbiri kutudan çıkar çıkmaz tema oluşturmak için iyi optimize edilmemiştir ve bu sorunu çözmeyi amaçlayan mevcut eklentiler, sorunu tam olarak çözmekten çok uzaktır.

Birleştirme teknolojisine sahip UXPin gerçek, canlı bileşenler kullandığından, bunları gerçek, canlı bileşenler olarak da temalandırabilirsiniz. Sadece ihtiyacınız olduğu kadar çok tema oluşturmakla kalmaz, aynı zamanda bunları değiştirmek, bir açılır menüden doğru temayı seçmek kadar hızlı olabilir. (UXPin ile tema değiştirme hakkında daha fazla bilgiyi burada bulabilirsiniz.)

Avantajlar

Merge teknolojisine sahip UXPin, tasarım ve kod arasında daha önce nadiren görülen bir denklik düzeyi sağlar. Bir tasarım sürecinde kaynağa sadık olmak, sürecin tüm yönleri için kusursuz avantajlar sağlar. Tasarımcılar, yaptıklarının yanlış yorumlanmayacağını veya yanlış geliştirilmeyeceğini bilerek güvenle tasarım yapabilirler. Geliştiricilerin tasarımları koda çevirmesi ve açık olmayan uç durumlar ve ortaya çıkarılmamış senaryolar arasında dolaşması gerekmez. Bunun da ötesinde, herkes çalışmaya katılabilir ve temel kod hakkında hiçbir bilgisi olmadan canlı bileşenleri kullanarak fikirlerini hızlı bir şekilde prototipleyebilir. Daha demokratik, katılımcı süreçlere ulaşmak çok daha yakın.

Tasarımınızı kodla birleştirmek, yalnızca tasarımcıların ekibin diğer bileşenleriyle nasıl işbirliği yaptığını geliştirmekle kalmaz, aynı zamanda iç süreçlerini ve uygulamalarını da iyileştirebilir. Merge teknolojisine sahip UXPin, bazen DesignOps olarak adlandırılan, tasarım çabalarının büyük ölçekte optimizasyonuna odaklananlar için oyunun kurallarını değiştirebilir.

Doğru gerçeğin kaynağını kullanmak, ekipteki farklı kişiler tarafından üretilen işler arasında tutarlılığı korumayı inanılmaz derecede kolaylaştırır, aynı hizada kalmasına yardımcı olur ve ortak bir araç seti ile birlikte doğru sorunları çözer. Bir avuç istenmeyen varyasyonla artık “bağımsız semboller” yok.

Sonuç olarak, elde ettiğimiz şey muazzam zaman tasarrufu . Tasarımcılar, bileşenleri ve kutudan çıkan işlevleri güvenle kullanarak zamandan tasarruf sağlar. Bileşenler değiştikçe tasarım dosyalarını güncellemeleri, çalışmalarını belgelemeleri ve vizyonlarını ekibin geri kalanına açıklamak için “el sallamaları” gerekmez. Geliştiriciler, bileşenleri tasarımcılardan tahminde bulunma ve fazladan kurcalama gerektirmeyen, anında sindirilebilir bir şekilde alarak zamandan tasarruf sağlar.

Test ve kalite güvencesinden sorumlu kişiler, tasarımlar ve kodlar arasındaki tutarsızlıkları arayarak ve implantasyonun amaçlandığı gibi olup olmadığını tespit ederek zamandan tasarruf sağlar. Paydaşlar ve diğer ekip üyeleri, bu tür ekiplerin daha verimli yönetimi ve daha kolay gezinmesi sayesinde zamandan tasarruf sağlar. Daha az sürtüşme ve sorunsuz süreçler, ekip üyeleri arasındaki hayal kırıklığını sınırlar.

Dezavantajları

Bu avantajlardan yararlanmak, bazı giriş maliyetlerine rağmen gelir. UXPin gibi araçları prosesinizde verimli bir şekilde kullanmak için mevcut bir tasarım sistemine veya bileşen kitaplığına sahip olmanız gerekir . Alternatif olarak, çalışmanızı her zaman bir miktar sınırlama sağlayacak olan açık kaynaklı sistemlerden birine dayandırabilirsiniz.

Bununla birlikte, ilk etapta bir tasarım sistemi oluşturmaya kararlıysanız, sürecinizde UXPin with Merge teknolojisini kullanmak, çok az veya hiç ek maliyet getirmez. İyi yapılandırılmış bir tasarım sistemiyle, UXPin'i benimsemek bir mücadele olmamalıdır, ancak böyle bir değişimin faydaları büyük ölçüde kanıtlanabilir.

Özet

Tasarım sistemlerinin yaygın olarak benimsenmesi, medya geliştiricilerin ve tasarımcıların birlikte çalıştığı sorunları ele aldı. Şu anda, yalnızca ortamı değil, aynı zamanda onu yaratma şeklimizi de dönüştüren daha birleşik süreçlere doğru bir kayma gözlemleyebiliriz. Doğru araçları kullanmak bu değişiklik için çok önemlidir. Merge teknolojisine sahip UXPin, tasarımı canlı kod bileşenleriyle birleştirmeye olanak tanıyan ve tasarım ile geliştirmenin faaliyet gösterdiği alanlar arasındaki boşluğu büyük ölçüde daraltan bir tasarım aracıdır.

Sıradaki nerede?

• UXPin Merge: Öykü Kitabı Entegrasyonu
  Storybook entegrasyonunun ürün ekibinize nasıl yardımcı olabileceğini öğrenin ve deneyin!
• UXPin Birleştirme: Git Entegrasyonu
  Git deposuyla entegrasyonun nasıl çalıştığını görmek için erişim isteyin.
• UXPin Merge hakkında kısa video açıklayıcı
  “Etkileşimli Tasarım Sistemleri: Johnson & Johnson ile Web Semineri” kapsamında.
• Kodlu Tasarım: UXPin Birleştirme Eğitimi
  Merge teknolojisine sahip UXPin'e giriş eğitimi.
• UXPin Merge ile Duyarlı Tasarım
  Merge teknolojisine sahip UXPin ile tamamen duyarlı deneyimlerin prototipini oluşturmaya yönelik bir kılavuz.