Tasarım VS Kodu - Neden el ele gitsinler?

Tasarımcılar yalnızca bir web sitesinin görsel markalaşmasının sanatına mı odaklanmalı? Geliştiricilerin yalnızca kodlamayı bilmesi mi gerekiyor? Drupal'da Front-end geliştirmenin önemi nedir? Bu yazıda tüm sorularınızın cevaplarını bulalım.

Bu tasarıma karşı kod bilmecesine daha derinden girdiğimizde, her ikisinin de aslında birbirini tamamlayıcı olduğu ortaya çıkıyor. Ama soru şu ki, neden? UI/UX tasarımcıları neden kodu ve temellerini öğrenmek zorundalar ve aynı şey tasarım açısından geliştiriciler için de geçerli.

Her iki alan da yaratıcı olmayı, kullanıcıları ve davranışlarını anlamayı içerir. Temel kodlama becerilerini ve kod yapısını bilmeden tasarımcı olmak, yemek yediğinizde sizi banyo çılgınlığına götürebilecek yarı pişmiş bir pasta hazırlamak gibidir.

Ama her şeyden önce, bir örnekle temel bilgilere gelelim.

Tasarım Vs Kodlama : Fark yaratan benzerlik

Bir yazar için, gerçekten yazmadan önce düşüncelerini hayal etmeli ve sonuçlandırmalı. Kimse sadece bir günlük tutmaz, bir bloga ya da sosyal medya platformuna gidip hemen yazmaya başlar. Bu yüzden tüm prosedüre beste denir. Ve evet, Gmail'de e-posta yazmaya "oluşturma" da denir. Şimdi, neden yazarlardan, bestelerden ve hepsinden bahsediyoruz? Uzatmadan konuya girelim. Bu durumda, hayal gücü sizin tasarımınızdır ve düşüncelerinizi yazmak gelişmedir. Umarım şimdi daha iyi bir resminiz vardır; bu konunun farklı bir yönüne geçelim.

Tasarımcılar Kodlamayı ve Geliştiriciler UI/UX'i öğrenmeli mi?

Tasarım kodu sprintleri sırasında, oluşturulan tüm tasarımların uygulanabilir olmadığı durumlarla karşılaşabilirsiniz. Sonunda, nihai ürün, orijinal tasarımın ince ayarlı bir versiyonu olur. Tartışmalar olur, müşteri gereksinimleri değiştirir, ancak sorun tutarlı kalır. Tasarım ve geliştirme ekipleri en başından itibaren birlikte çalışırsa bu durumlar önlenebilir. Bu şekilde, iş daha verimli bir şekilde yapılır, çünkü nelerin yapılabileceği veya nelerin yapılamayacağı konusunda birbirlerinden sürekli geri bildirim alırlar.

Her iki alanı da anlamak düşündüğünüz kadar zor değil. Her ikisinde de hayal gücü, düşünce süreci ve pratik gerekir. Ve evet, bahsetmiyorum bile, temel beceriler, öğrenmek için bir seçim olan ancak bir tane biliyorsanız zorunlu olmayan tasarım ve koddur.

Bir tasarımcı, bir tasarımın fizibilitesini, olasılığını ve zorluklarını bilmelidir ve bunu ancak kod aracılığıyla nasıl başaracağınızı bildiğiniz zaman anlayabilirsiniz. Aynı şey geliştiriciler için de geçerli. Geliştiriciler, kullanıcıların yaşayabileceği farklı senaryoları, kullanıcı deneyimlerini, sorun gidermelerini, çözümlerini vb. anladıklarında, işleri çok daha basit ve verimli hale getirebilir.

Bir bireyin temel uzmanlıklarından ayrı olarak becerilerden birinin (kod veya tasarım) temellerini öğrenmesi için nedenler şunlardır:

1. Ürünün görünümü ve hissi üzerinde daha fazla kontrol: Bunun temel olarak anlamı, bir geliştirici tasarım analizinin nasıl çalıştığını ve hangi tasarım sürecinin dahil olduğunu bildiğinde, bu tasarım fikirlerini uyarlayabilir ve son ürün üzerinde daha fazla kontrole sahip olabilir. ve böylece ürünün daha hızlı teslim edilmesini sağlar.
2. Kullanıcıları anlayın ve bunu tasarıma uygulayın: Bir geliştirici ürünü kullanıcının bakış açısından anladığında, bu ona, kullanıcıların gerçekten ihtiyaç duyduğu ve aynı zamanda arzu ettiği bir şeyi inşa etmesi için muazzam bir güç verir. Örneğin, kullanıcıların farklı tipografiye, farklı düğme stillerine, renk şemalarına vb. nasıl tepki vereceğini anlayacaktır.
3. Tasarım Uyarlaması: Kodlamayı bilen tasarımcılar için de aynı derecede önemlidir. Tasarlanan ürünün geliştirilirken nasıl yapılandırılacağını bildiğinde, ideal olarak tasarımı iyileştirebilir ve daha verimli hale getirebilir, böylece geliştiricilerin harcadığı zaman ve çabayı azaltabilir.

Örneklerle yalnızca temel uzmanlığa sahip olmanın sonuçlarını detaylandırma

Tasarım ve Kodlamanın neden el ele gitmesi gerektiğini daha iyi anlamak için birkaç örneğe bakalım.

Yukarıdaki, sıralı olmayan yapının kullanımının klasik bir örneğidir. Burada yapı, mobil için geliştirilirken yeniden düzenlenmiştir. Bu yalnızca kötü bir uygulama değildir; aynı zamanda zaman alıcı ve zahmetlidir. Bununla birlikte, bir tasarımcı geliştirilmekte olan kodun yapısını bilseydi, kolayca ve muhtemelen önlenebilirdi.

Yukarıdaki, kaydırmalı bir açılır pencere yerleşimi örneğini düşünün. Açılır pencere yerleşimi, kullanıcının dikkatini tek bir konuya yönlendirecek şekilde tasarlanmıştır ve yalnızca belirli bir bilginin görüntülenmesi gerektiğinde odak olarak kullanılır. Burada, pop-up yer paylaşımının arka planında kullanıcının dikkatini dağıtabilecek ve pop-up'ın etkisiz olduğunu kanıtlamayabilecek bir kaydırma vardır.

Bir geliştirici her zaman görevi daha verimli ve daha hızlı bir şekilde tamamlamaya odaklanır ve bu süreçte tasarımın gereksiz olduğunu düşündüğü veya tasarımı biraz değiştirerek yapılabileceğini düşündüğü bazı yönlerini kaçırır. Yukarıda belirtilen örnek, bir geliştirici işini yaptığında ancak tasarımdan ödün verdiğinde tam olarak senaryoyu gösterir. Bu nedenle, geliştiricinin temel UI/UX'e maruz kalması durumunda, bu sorun muhtemelen ve kolayca önlenebilirdi.

Başka bir örnek olarak, bir para tasarrufu uygulamasından olan yukarıdaki ekran görüntülerini alalım. Görevin kendisinde dijital imza için herhangi bir giriş alanı yoktur. Ayrıca, formu gönderdikten sonra, hata mesajı kullanıcıya geçerli bir dijital imzanın nasıl elde edileceğine dair herhangi bir rehberlik veya öneride bulunmaz. Bir geliştirici, UI/UX'in temellerini biliyorsa, sonraki süreçte kullanıcıyı kolayca yönlendirebilir veya alana uygun bir referans veya önerilerle mesajı daha basit bir şekilde görüntüleyebilirdi.

Nereden başlamalı?

Başlamak her zaman iyi bir fikirdir. Tasarımcılar için öğrenilmesi gereken temel bilgiler HTML, CSS ve biraz JS/jQuery'dir. Pratik yapmanız ve öğrenmeniz için canlı IDE araçlarına sahip çok sayıda çevrimiçi öğrenme platformu ve web sitesi vardır.

HTML : Herhangi bir tasarımın temel yapısı önce gelir ve herhangi bir ürünün kodudur.
JS/jQuery: Bunlarla kaydırıcılar, açılır pencereler, açılır menüler ve çok daha fazlası elde edilebilir
Sandbox : Kodunuzla oynamak için canlı araç
CSS/SCSS : Yapıyı şekillendirmek yaratıcı bir süreçtir ve bunu CSS/SCSS ile başarabilirsiniz.
W3Schools: Basit bir çevrimiçi öğrenme platformu ve başlamak için iyi bir platform
Codrops (Tympanus): Tasarım ve geliştirici aklının aynı platformda olduğu geniş bir kütüphane

Geliştiriciler için, aşağıdakilerle UI/UX ile ilgili en iyi uygulamaları izleyerek başlayabilirsiniz:
Behance: Profesyonel portföy ve ilham için eksiksiz tasarım yığını
Dribbble: Göndermek ve ilham almak için fikirler tasarlayın
Muzli: Bloglar, ilhamlar, fikirler
Orta : Herhangi bir alan (neredeyse), en iyi uygulamalar ve öğreticiler hakkında bloglar
Awwwards: En iyi tasarım için aday gösterilen web siteleri ve ilham alınacak kazananlar
XD/Figma/Sketch: UI/UX için maketler, tel kafesler tasarlamak için araçlar

Tasarımcılar için

Geliştiriciler için

Drupal'da Ön Uç Geliştirme

Bir CMS olarak Drupal 8, UI/UX tasarımcısı dostu bir içerik yönetimi çerçevesidir çünkü kutudan çıkar çıkmaz sunacağı çok şey vardır, en önemlisi mevcut temaların çeşitliliği ve duyarlı tasarımlardır. Tabii şu an aklıma gelen daha birçok özellik var ama onu başka bir güne bırakalım.

UX tasarımcıları yaratıcı becerilerini uygularken ve bir Drupal web sitesinin görsel sunumuna odaklanırken, Front-end Drupal geliştiricileri UX tasarımcıları ve back-end Drupal geliştiricileri arasındaki boşluğu doldurur. Tasarımcı tarafından sağlanan görsel bileşenleri bir Drupal web sitesinde uygulayanlardır. Hem UX tasarımcısı hem de Front-end Drupal geliştiricisi, kullanıcı deneyimi ve UX ile ilgili sorunları çözme açısından düşünse de, bunları çözmek için farklı yaklaşımlar kullanırlar. Ancak ikincisi, her zaman kod aracılığıyla bir çözüm bulur.
Ön uç Drupal geliştiricileri, Drupal temaları üzerinde çalışarak ve bunları özelleştirerek güzel Drupal web siteleri sunmaktan sorumludur. PHP, CSS, jQuery, CSS, HTML ve en önemlisi mobil öncelikli web sitesi tasarımı bilgisi ile donatılmaları gereken ön uç sorunlarını çözebilmelidirler.

Başsız Drupal web sitelerinin ve ayrıştırılmış mimarinin artan popülaritesi ile Angular, ReactJS, Vue.js gibi ön uç geliştirme çerçevelerini anlayan Front-end Drupal geliştiricileri her zaman rekabet avantajına sahiptir.
Sonuç olarak, Front-end Drupal geliştirmede üstün olabilmek için kişinin konfor alanından çıkması ve en son teknolojilerle donatılmış modern dijital deneyimleri en iyi nasıl oluşturup uygulayabileceklerini öğrenmesi gerekir.