Tasarımcıların Görüntü Tabanlı Tasarımdan Kod Tabanlı Tasarıma Geçiş Zamanı

Neden Görüntü tabanlı tasarımdan Kod tabanlı tasarıma geçmelisiniz?

Dijital ürün tasarımının başlangıcından beri büyük bir sorun var. Tasarımcılar, ürün geliştirme sürecinden ayrılmakta ve sadece yazılım ile çalışmak zorunda bırakılmaktadır.

Tasarımcılar, organizasyonun geri kalanından ayrılırken resimler çizmek için raster grafikler veya vektör tasarım araçları kullanır. Photoshop, Gimp, Sketch veya Fireworks gibi farklı yazılımlarda çalışsalar bile çoğu durumda süreç aynı kalır. Tasarımcılar tarafından oluşturulan amaç olarak mühendislere bir dizi statik görüntü gönderilir.

Statik resim panoları aracılığıyla arayüzün farklı durumlarını göstermek son derece sıkıcıdır. Bu nedenle her şey tasarımcılar tarafından detaylandırılmaz. Ve nihayetinde, tüm kullanıcı arayüzü, bir dizi tamamlanmamış statik görüntünün yardımıyla mühendisler tarafından oluşturulur. Genellikle uzun bir ileri geri iletişimde, tüm etkileşimli durumlar genellikle düzeltilir.

Deneyim, statik tasarımlarla doğru bir şekilde temsil edilmez ve bu nedenle testler genellikle kullanıcılar için yorucu olur. Bir organizasyonun başarısız ürünlere ve hüsrana uğramış ekiplere yol açması bu verimsiz süreçlerden kaynaklanmaktadır.

Bugün teknolojideki evrim sayesinde, bir şeyler tasarlamak için daha iyi bir yola sahibiz. Görüntü tabanlı tasarım araçlarının yerini hızla kod tabanlı tasarım araçları paradigması alıyor. Vektör tasarım araçlarından veya rasterden çizilen tasarımın statik temsilleri, tasarımcıların gerçekten nasıl kodlanacağını bilmeden doğrudan kodda amaçladığı işlenmiş tasarımlarla değiştirilir.

Yeni araçlar seti tarafından yeni bir iş akışı sağlanır:

• Tasarımcılar ve Mühendisler, her ikisi de tek bir gerçek kaynağı oluşturur
• Herhangi bir kodlama deneyimi olmadan, tasarımcıları kodlamanın tüm gücüyle güçlendirir
• Tasarımcılar ve mühendislerden oluşan ikili, muhteşem bir iş akışı evrimi yaratan tek bir ortak yaratıcı süreçle birbirine bağlanır

UXPin ile Görüntü Tabanlıdan Kod Tabanlı Tasarıma

Buradaki ilk ve temel soru, Görüntü tabanlı tasarımdan Kod tabanlı tasarıma geçiş yapmadan önce görüntü tabanlı tasarımda neyin iyi veya verimsiz olmadığıdır. Kod tabanlı ve görüntü tabanlı tasarım araçları gibi iki tasarım aracı paradigması olduğunun farkında olabilirsiniz.

Görüntü tabanlı tasarım aracı, onlarca yıldır kullanılan ve oldukça eski bir yaklaşımdır. Tasarımcılar, bu araçlar yaklaşımının fikri olan bir şey çizerken vektör veya raster grafikler oluşturmak zorundadır.

Bu yaklaşımla tasarımcılar maksimum esnekliğe sahip olurlar. Gelişmiş çizimlerden basit simgelere kadar her şey, en güzel ayrıntı düzeyi de dahil olmak üzere bu şekilde etkili bir şekilde çizilebilir. Profesyonel dijital ürün geliştirme söz konusu olduğunda, genellikle bozulur. İşte bunun olmasının nedeni.

1. Eksik Birlikte Çalışabilirlik: Fotoğraflar, çizimler ve simgeler dışında bir ürünün gerçek arayüzü asla bu grafiklerle oluşturulmaz. Tasarımcılar, görüntü tabanlı tasarım araçlarında arayüz tasarımı üzerinde çalışırken kodda belirlenen kısıtlamaların dışında çalışır. Bu nedenle, bilinmeyen bir şekilde kodlanması pahalı ve zor olan şeyler yaratabilirler.

2. Eksik Doğruluk: Ayrıntılı harika tasarımlar oluşturmanın yanı sıra, geliştirme sürecinde en hatalı sonuçlar genellikle görüntü tabanlı araçlarla olur. Tasarımcının işi tamamen farklı bir süreçle işleniyor.

Bu nedenle, bir tasarımcı tarafından seçilen degrade, metin ve renk kodunda ve bir mühendis tarafından aynı özelliklerin uygulanmasında bile bir fark vardır. Takımlar bu nedenle büyük bir yanlış hizalamadan etkilenir.

3. Statik Tasarım: Görüntü tabanlı tasarım aracına odaklanan iş akışı, sonunda birbirine bağlanan arayüzün tüm durumları için statik çalışma yüzeyleri oluşturmaya odaklanır. Profesyonel projeler için bu bir müdahale yaklaşımıdır. Statik pencerede, en basit kalıplar, yönetilemez bir açılır menüye dönüşür.

Bunun nedeni, yeniden kullanılabilirlik için etkileşimli bileşenleri koruma yeteneğinin olmaması ve önemli ölçüde büyük miktarda çalışma yüzeyi olmasıdır. Tüm bu araçlara ek olarak, içerik, öğe durumları, koşullu mantık ve diğerleri için değişkenler ayarlama yeteneği olmadan yalnızca temel etkileşime izin verir.

4. Tasarım-mühendislikte zayıf işbirliği: Mühendislik süreci bu araçtan tamamen farklıdır ve birleştirilemez. Her iki dünyanın çıktısı, doğasından kopuktur.

Kullanıcılar tarafından kullanılan teknolojiler, geliştiricilerin çalışmalarının nihai ürünü olup, görüntü tabanlı tasarım ile nihai kullanıcı deneyiminden uzak ek soyutlama katmanları tanıtılmaktadır.

Tasarımcılar ve mühendisler, yeniden kullanılabilir etkileşimli bileşenler, gerçek etkileşimlerin olmaması ve koddan bağlantıları içe aktarma yeteneği nedeniyle birbirleriyle bağlantısız ve hayal kırıklığına uğramış durumda.

Kod tabanlı tasarımda benzersizlik

Görüntü tabanlı tasarımdan kod tabanlı tasarıma geçişi vurguladığımız için bu tasarımda neyin özel olduğunu bilmek önemlidir. Bir kullanıcı, kod tabanlı bir tasarım aracı kullanarak bir şey çizdiğinde, ilgili CSS/HTML/JS'yi oluşturur ve tarayıcıyı çalıştırır. Bu, motorun sonuçları görsel olarak göstermesini sağlar.

Görüntü tabanlı tasarımdan kod tabanlı tasarıma geçişlerinden sonra tasarımcılara sağlanan faydalar aşağıdadır.

1. Aslına Uygunluk: Bir tasarımcının amacı ile kod tabanlı bir tasarım kullanıldığında kodlanabilir bir sonuç arasında yüzde yüz uyum vardır. Tüm tasarım projelerini oluşturmak için kod tabanlı tasarımda kullanılan teknoloji web geliştirme ile aynıdır.

2. Tasarımcılar ve geliştiriciler arasındaki kısıtlama farkını ortadan kaldırır: Tasarlanması zor ve kodda yeniden oluşturulması imkansız olan şeyler, tasarımcılar tarafından görüntü tabanlı araçlarda oluşturulabilir. Bu tamamen aynı kısıtlamalar, kod tabanlı araçlarda hem tasarımcılar hem de geliştiriciler için geçerlidir. Bu nedenle, hem tasarımcıların hem de geliştiricilerin senkronize kalmasını sağlar.

3. Resim panolarını etkileşimli bileşenlerle değiştirme: Bağlantılı resim panoları yerine, kod tabanlı tasarım aracı, bileşenler üzerinde en gelişmiş etkileşimleri kullanır. Bu yaklaşım, tasarımcılara yüksek oranda yeniden kullanılabilir etkileşimli tasarım sistemleri oluşturma konusunda doğrudan yetki verir ve aynı zamanda geliştirmeyi de taklit eder.

4. Gerçekçi ve Güçlü Etkileşimler: Görüntü tabanlı tasarımlardan kod tabanlı tasarımlara geçişle birlikte nesneler birbirleriyle etkileşime girebilir, ekranda hareket edebilir ve karmaşık desenler oluşturabilir. Mühendislerle işbirliği yapmak ve kullanıcılarla test yapmak için en önemli olanın nasıl kodlanacağını bilmek gerekmez.

5. Şimdiye kadarki en güçlü işbirliğini yaratır: Mühendislik ve tasarım işbirliğine tamamen yeni, devrim niteliğinde bir yaklaşım, kod tabanlı paradigma aracılığıyla sağlanır.

İlgili makale

Web Tasarımcısı ve Web Geliştiricisi Farkı