Ön Uç Geliştiriciler, Tasarımcılar ve Geliştiriciler Arasındaki Boşluğu Kapatmaya Nasıl Yardımcı Olabilir?

Son dokuz yılda, birlikte çalıştığım hemen hemen her tasarımcı, günlerce geliştiricilere boşlukları, yazı tipi boyutlarını, görselin yanı sıra doğru bir şekilde uygulanmayan düzen yönlerini düzeltmek için geri bildirim vermek zorunda kaldıklarından duydukları hayal kırıklığını dile getirdiler. . Bu genellikle tasarımcılar ve geliştiriciler arasındaki güvenin zayıflamasına ve iki disiplin arasında kötü bir atmosferin yanı sıra motivasyonsuz tasarımcılara neden olur.

Çoğu zaman, geliştiriciler, tasarım ekibinin ortaya çıkardığı ayrıntılar hakkında düşünceli olmaya gelince, aşırı teknik ve cahil olma gibi kötü bir üne sahip görünüyorlar. Andy Budd'ın bir makalesine göre, "[…] pek çok geliştirici tasarım konusunda aynı konumda, sadece bunun farkında değiller." Gerçekte ise (Paul Boag'ın işaret ettiği gibi), "geliştiricilerin her zaman tasarım kararları vermesi [gerekir]."

Bu makalede, yaratıcı meslektaşlarıyla çalışırken hayal kırıklığını önlemek ve üretkenliği artırmak için ön uç geliştiricilere pratik tavsiyeler sunacağım.

Bir Tasarımcının Gözünden Bakmak

Bir an için bir tasarımcı olduğunuzu ve son haftalarınızı - aylar değilse bile - bir web sitesi tasarımı yapmak için harcadığınızı düşünelim. Siz ve ekip arkadaşlarınız, müşteri sunumlarının yanı sıra birden fazla dahili revizyondan geçtiniz ve beyaz boşluk, yazı tipi stilleri ve boyutları gibi görsel ayrıntıların ince ayarını yapmak için sağlam bir çaba harcadınız. (Duyarlı bir çağda - elbette birden fazla ekran boyutu için.) Tasarımlar müşteri tarafından onaylandı ve geliştiricilere teslim edildi. Rahatlamış ve mutlu hissediyorsunuz.

Birkaç hafta sonra, geliştiricinizden şunları söyleyen bir e-posta alırsınız:

“Etleme sitesi kuruldu. İşte bağlantı. Lütfen QA yapar mısınız?”

Beklenti heyecanıyla, bu hazırlama bağlantısını açıyorsunuz ve bazı sayfalarda gezindikten sonra sitenin biraz kötü göründüğünü fark ediyorsunuz. Boşluklar, tasarımınızın önerdiğine yakın bile değil ve düzende bazı sapmalar fark ediyorsunuz: yanlış yazı tipi yüzleri ve renkleri, yanlış etkileşimler ve fareyle üzerine gelme durumları. Heyecanınız yavaş yavaş azalmaya ve hayal kırıklığı hissine dönüşmeye başlar. "Nasıl olmuş olabilir?" diye sormadan edemiyorsunuz.

Sebep Arama

Belki de tasarımcılar ve geliştiriciler arasındaki iletişimde pek çok talihsiz yanlış anlama vardı. Yine de kendinize sormaya devam ediyorsunuz:

• Tasarımların devir teslimi neye benziyordu? E-posta yoluyla paylaşılan ve bazı yorumlarla paylaşılan bazı PDF'ler, Photoshop veya Sketch dosyaları mı vardı, yoksa olası bir tasarım sistemi, tipografi, duyarlı davranış, etkileşimler ve animasyonlar gibi çeşitli yönlerin tartışıldığı gerçek bir devir teslim toplantısı mı vardı?
• Belirli etkileşimleri görselleştirmeye yardımcı olan etkileşimli veya hareketli prototipler var mıydı?
• Belirlenmiş öncelik seviyelerine sahip önemli hususların bir listesi oluşturuldu mu?
• Aynı odada hem tasarımcılar hem de geliştiricilerle birlikte kaç konuşma gerçekleşti?

İletişim ve devir çok önemli iki nokta olduğundan, her birine daha yakından bakalım.

İletişim Anahtardır

Tasarımcılar ve geliştiriciler, lütfen birbirleriyle konuşun. Çok konuş. Projede ne kadar erken ve ne kadar sık ​​olursa o kadar iyidir. Mümkünse, sürekli olarak fizibiliteyi değerlendirmek ve disiplinler arası girdi almak için projenin başlarında (ve düzenli olarak) devam eden tasarım çalışmalarını birlikte gözden geçirin. Tasarımcılar ve geliştiriciler doğal olarak aynı parçanın farklı yönlerine odaklanır ve bu nedenle olayları farklı açılardan ve perspektiflerden görürler .

Erken check-in yapmak, geliştiricilerin projeye aşina olmalarını sağlar, böylece teknik terimler üzerinde önceden araştırma yapmaya ve planlamaya başlayabilir ve özelliklerin nasıl optimize edileceğine dair fikirlerini sunabilir. Sık sık check-in yapmak , ekibi kişisel ve sosyal düzeyde bir araya getirir ve etkili bir şekilde iletişim kurmak için birbirinize nasıl yaklaşmanız gerektiğini öğrenirsiniz.

Tasarımdan Geliştirmeye Devir

Bir kuruluş gerçekten çevik bir iş akışını takip etmedikçe, tasarım kompozisyonlarının ve varlıklarının (tasarım ekibinden geliştiricilere) ilk devri muhtemelen bir projenin bir noktasında gerçekleşecektir. Bu devir – eğer kapsamlı bir şekilde yapılırsa – her iki taraf arasında sağlam bir bilgi ve anlaşma temeli olabilir. Bu nedenle, acele etmemek ve fazladan zaman planlamak önemlidir.

Bir sürü soru sorun ve her gereksinim, sayfa, bileşen, özellik, etkileşim, animasyon, her şey hakkında konuşun ve not alın. İşler net değilse, açıklama isteyin . Örneğin, harici veya sözleşmeye dayalı ekiplerle çalışırken, hem tasarımcılar hem de geliştiriciler, ileride başvurmak üzere karşılıklı anlaşma belgesi olarak alınan notları imzalayabilir.

Düz ve statik tasarım kompozisyonları, bir web sitesinin grafik ve yerleşim özelliklerini göstermek için iyidir, ancak açıkçası etkileşimlerin ve animasyonların uygun temsilinden yoksundur. Karmaşık animasyonların prototiplerini veya çalışan demolarını istemek, dahil olan herkes için neyin oluşturulması gerektiğine dair daha net bir vizyon yaratacaktır.

Günümüzde, tasarımcıların akışları ve etkileşimleri farklı doğruluk seviyelerinde modellemek için kullanabilecekleri çok çeşitli prototipleme araçları mevcuttur. Javier Cuello, kapsamlı makalelerinden birinde projeniz için doğru prototipleme aracını nasıl seçeceğinizi açıklıyor.

Her proje benzersizdir ve gereksinimleri de öyle. Bu gereksinimler nedeniyle, kavramsallaştırılmış özelliklerin tümü her zaman oluşturulamaz. Genellikle bir şeyler inşa etmek için mevcut zaman ve kaynaklar sınırlayıcı bir faktör olabilir. Ayrıca kısıtlamalar, fizibilite, erişilebilirlik, performans, kullanılabilirlik ve tarayıcılar arası destek gibi teknik gereksinimlerden, bütçe ve lisans ücretleri gibi ekonomik gereksinimlerden veya beceri düzeyi ve geliştiricilerin kullanılabilirliği gibi kişisel kısıtlamalardan gelebilir .

Peki ya bu kısıtlamalar tasarımcılar ve geliştiriciler arasında çatışmalara neden olursa?

Uzlaşma Bulmak ve Paylaşılan Bilgi Oluşturmak

Bir projeyi zamanında başarılı bir şekilde sevk etmek ve tanımlanmış tüm gereksinimleri karşılamak için iki disiplin arasında uzlaşma bulmak çoğunlukla kaçınılmazdır. Geliştiricilerin, belirli bir durumda bir şeylerin neden değişmesi gerektiğini veya yapılamadığını açıklarken tasarımcılarla teknik olmayan terimlerle konuşmayı öğrenmeleri gerekir.

Geliştiriciler, “Üzgünüm, bunu inşa edemeyiz” demek yerine, tasarımcılar için anlaşılır bir açıklama yapmaya çalışmalı ve - en iyi durumda - bilinen kısıtlamalar dahilinde çalışan alternatif bir çözüm için öneriler hazırlamalıdır . Görüşünüzü istatistikler, araştırmalar veya makalelerle desteklemek, argümanınızı vurgulamanıza yardımcı olabilir. Ayrıca, zamanlama bir sorunsa, zaman alan bazı bölümlerin uygulanması projenin sonraki bir aşamasına taşınabilir mi?

Her zaman mümkün olmasa da, tasarımcıların ve geliştiricilerin yan yana oturması, geri bildirim döngülerini kısaltabilir ve tehlikeye atılmış bir çözüm bulmayı kolaylaştırabilir. Uyarlama ve prototip oluşturma, DevTools açıkken kodlama ve optimizasyon yoluyla doğrudan yapılabilir.

Tasarımcı arkadaşlarınıza, temel bilgileri değiştirebilmeleri ve tarayıcılarındaki küçük değişiklikleri (örneğin dolgular, kenar boşlukları, yazı tipi boyutları, sınıf adları) anında önizleyebilmeleri için DevTools'u bir tarayıcıda nasıl kullanacaklarını gösterin.

Proje ve ekip yapısı buna izin veriyorsa, tarayıcıda mümkün olan en kısa sürede oluşturma ve prototip oluşturma, ilgili herkesin duyarlı davranışı daha iyi anlamasını sağlayabilir ve projenin erken aşamasında hataların ve hataların ortadan kaldırılmasına yardımcı olabilir.

Tasarımcılar ve geliştiriciler ne kadar uzun süre birlikte çalışırsa, geliştiriciler için neyin daha kolay ve neyin daha zor olduğunu daha iyi anlayacaktır. Zamanla, geçmişte her iki taraf için de işe yarayan çözümlere başvurabilirler:

"Proje A'da bir uzlaşma bulmak için bu çözümü kullandık. Bu proje için de kullanabilir miyiz?"

Bu aynı zamanda geliştiricilerin, tasarımcıların hangi ayrıntılar hakkında çok spesifik olduğu ve onlar için hangi görsel yönlerin önemli olduğu konusunda daha iyi bir fikir edinmelerine yardımcı olur.

Tasarımcılar Ön Uçtan Tasarımları Gibi Görünmesini (Ve İşlevini) Bekliyor

Tasarım Dosyası Vs. Tarayıcı Karşılaştırması

Tasarımcıların hayal kırıklığına uğramasını önlemek için yararlı bir teknik, size teslim edilen tasarım dosyası ile mevcut geliştirme durumunuz arasında basit bir sol-sağ karşılaştırması yapmaktır. Bu kulağa önemsiz gelebilir, ancak bir geliştirici olarak, kaputun altında çalışması gereken o kadar çok şeyle ilgilenmeniz gerekiyor ki, bazı görsel ayrıntıları kaçırmış olabilirsiniz. Göze çarpan bazı tutarsızlıklar görürseniz, bunları düzeltmeniz yeterlidir.

Bunu şu şekilde düşünün: Uygulamanızdaki tam olarak tasarlandığı gibi görünen her ayrıntı, hem sizi hem de tasarımcıyı değerli zamandan ve baş ağrısından kurtarır ve güveni teşvik eder. Herkes ayrıntılara aynı düzeyde dikkat göstermeyebilir, ancak gözünüzü görsel farklılıkları fark edecek şekilde eğitmek için kısa bir Unsee Edilemez turu iyi bir yardımcı olabilir.

Bu bana uzun zaman önce oynadığımız “Bul” adlı oyunu nostaljik bir şekilde hatırlatıyor. Puan kazanmak için görünüşte benzer iki görüntüyü karşılaştırarak tutarsızlıkları bulmanız gerekiyordu.

Yine de şunu düşünüyor olabilirsiniz:

"Tasarımda göze çarpan bir yazı tipi boyutu ve boşluk sistemi yoksa ne olur?"

Peki, iyi nokta! Deneyimler bana, kendi başınıza bir şeyleri kökten değiştirmeye başlamak ve daha sonra tasarımcı(lar) için istenmeyen sürprizler yaratmak yerine , açıklama isteyerek tasarımcı(lar) ile bir sohbet başlatmanın yardımcı olabileceğini gösterdi.

Temel Tipografik ve Tasarım Kurallarını Öğrenin

Oliver Reichenstein'ın bir makalesinde belirttiği gibi, web'deki bilgilerin %95'i yazı dilidir. Bu nedenle tipografi sadece web tasarımında değil, geliştirmede de hayati bir rol oynamaktadır. Tipografinin temel terimlerini ve kavramlarını anlamak, tasarımcılarla daha etkili iletişim kurmanıza yardımcı olabilir ve ayrıca bir geliştirici olarak daha çok yönlü olmanızı sağlar. Web'de tipografinin önemini anlattığı ve mikro ve makro tipografi gibi terimleri açıkladığı için Oliver'ın makalesini okumanızı tavsiye ederim.

“Mobil Web Tasarımında Tipografi İçin Başvuru Kılavuzu”nda, Suzanne Scacca yazı tipi, yazı tipi, boyut, ağırlık, karakter aralığı, satır aralığı ve izleme gibi tipografi terminolojisini ve tipografinin modern web tasarımındaki rolünü kapsamlı bir şekilde ele almaktadır.

Tipografik ufkunuzu daha da genişletmek istiyorsanız, Matthew Butterick'in “Butterick'in Pratik Tipografisi” kitabı okumaya değer olabilir. Ayrıca tipografinin temel kurallarının bir özetini sunar.

Duyarlı web tasarımında özellikle yararlı bulduğum bir şey, daha kısa satırları okumak uzun satırlardan daha rahat olduğundan, ortalama satır uzunluğunun (satır başına karakter) 45 ila 90 karakter arasında olması gerektiğidir.

Geliştiriciler Tasarım Yapmalı mı?

Tasarımcıların kodlamayı öğrenmesi gerekip gerekmediği konusunda pek çok tartışma oldu ve siz de kendinize aynı soruyu soruyor olabilirsiniz. Bir kişinin her iki disiplinde de başarılı olamayacağına inanıyorum ve bu tamamen iyi.

Rachel Andrew, “Birlikte Çalışmak: Tasarımcılar ve Geliştiriciler Daha İyi Projeler Yaratmak İçin Nasıl İletişim Kurabilir” başlıklı makalesinde, daha etkin bir şekilde işbirliği yapmak için hepimizin ekip arkadaşlarımızın dili, becerileri ve öncelikleri hakkında bir şeyler öğrenmemiz gerektiğini, böylece kendimizin ortak bir dil ve örtüşen uzmanlık alanları oluşturabilir.

Tasarım alanında daha bilgili olmanın bir yolu, Sarah Drasner tarafından sunulan ve web tasarımının iki temel alanı olan temel yerleşim ilkeleri ve renk teorisi hakkında konuştuğu “Geliştiriciler için Tasarım” olarak bilinen çevrimiçi bir kurstur.

"Kendi disiplininizin dışında ne kadar çok şey öğrenirseniz, bir geliştirici olarak sizin için [...] aslında daha iyi olur."

— Sarah Drasner

Görsel Merkez

Tasarımcılarla işbirliği yaparak matematiksel ve görsel merkez arasındaki farkı öğrendim. Okuyucunun dikkatini belirli bir öğeye çekmek istediğimizde, gözümüzün doğal odak noktası, sayfanın matematiksel merkezinin biraz üzerinde yer alır.

Bu konsepti, örneğin, konum modları veya herhangi bir tür bindirme için uygulayabiliriz. Bu teknik , kullanıcının dikkatini doğal bir şekilde çekmemize yardımcı olur ve tasarımın daha dengeli görünmesini sağlar:

Hepimiz Bu işte Birlikteyiz

Sıkı teslim tarihlerine sahip hızlı tempolu ve çok çevik olmayan ajans ortamlarında, geliştiricilerden genellikle bir mobil ve masaüstü modeline dayalı olarak tamamen işlevsel, duyarlı ön uçlar uygulamaları istenir. Bu kaçınılmaz olarak geliştiriciyi süreç boyunca tasarım kararları almaya zorlar. “Başlıkların yazı tipi boyutunu hangi genişlikte küçülteceğiz?” gibi sorular. veya "Üç sütunlu düzenimizi ne zaman tek bir sütuna geçirmeliyiz?" ortaya çıkabilir.

Ayrıca, anın sıcağında, 404 sayfalık hata durumları, bildirimler, yükleme durumları, modlar veya stiller gibi ayrıntılar sadece çatlaklardan düşebilir. Bu gibi durumlarda, bunu daha önce düşünmesi gereken insanları suçlamaya ve suçlamaya başlamak kolaydır . İdeal olarak, geliştiriciler asla böyle bir duruma düşmemelidir, ama ya durum buysa?

Ueno'nun kurucusu ve CEO'su Haraldur Thorleifsson'un 2018'de San Francisco'daki bir konferansta konuşmasını dinlediğimde, temel değerlerinden ikisini sundu:

"Burada hiçbir şey başkasının sorunu değil."

"Atmadığımız çöpleri topluyoruz."

Ya daha fazla geliştirici, proaktif olarak yukarıda belirtilen eksik parçaları olabildiğince iyi bir şekilde taklit etmeye başlarsa ve ardından yanlarında oturan tasarımcı ile birlikte düzeltirse? Web siteleri tarayıcıda yaşar, öyleyse neden onu oluşturmak ve iyileştirmek için kullanmıyorsunuz?

Eksik veya unutulmuş parçalar her zaman ideal olmayabilir, ancak geçmiş deneyimlerimde, ekip olarak daha hızlı ilerlememize ve hataları anında ortadan kaldırmamıza her zaman yardımcı olduğunu öğrendim.

Elbette bu, tasarımcıların süreçte göz ardı edilmesi gerektiği anlamına gelmez. Bu, geliştiricilerin, problem çözmede inisiyatif göstererek tasarımcıları yarı yolda saygılı bir şekilde karşılamaya çalışması gerektiği anlamına gelir. Bunun yanı sıra, bir geliştirici olarak, sadece önemsediğim ve sorumluluk aldığım için ekip tarafından bana çok daha fazla değer verildi.

Tasarımcılar ve Geliştiriciler Arasında Güven Oluşturma

Yaratıcı ekip ve teknoloji ekibi arasında güvenilir ve olumlu bir ilişkiye sahip olmak, üretkenliği ve işin sonucunu güçlü bir şekilde artırabilir. Peki geliştiriciler olarak iki disiplin arasındaki güveni artırmak için ne yapabiliriz? İşte birkaç öneri:

1. Ayrıntılar için bir göz gösterin .
   Bir şeyleri tam olarak tasarlandığı gibi inşa etmek, tasarımcılara önemsediğinizi gösterecek ve yüzlerinde kocaman bir gülümseme bırakacaktır.
2. Saygıyla iletişim kurun .
   Hepimiz profesyonel bir ortamda mümkün olan en iyi sonucu elde etmek için çabalayan insanız. Birbirinin disiplinine saygı göstermek tüm iletişimin temeli olmalıdır.
3. Erken ve düzenli olarak kontrol edin .
   Geliştiricileri baştan dahil etmek, hataları erkenden ortadan kaldırmaya yardımcı olabilir. Sık iletişim yoluyla, ekip üyeleri ortak bir dil geliştirebilir ve birbirlerinin konumlarını daha iyi anlayabilir.
4. Kendinizi kullanılabilir hale getirin .
   Tasarımcıların geliştiricilerle fikirlerini tartışabilecekleri günde en az 30 dakikalık isteğe bağlı bir pencereye sahip olmak, tasarımcılara desteklendiği duygusu verebilir. Bu aynı zamanda geliştiricilere karmaşık teknik şeyleri o kadar teknik olmayan kişilerin daha iyi anlayabileceği kelimelerle açıklama fırsatı verir.

Sonuç: Bir Kazan-Kazan Durumu

Etkili iletişim ve tasarımların uygun şekilde devredilmesi yoluyla QA'da daha az zaman harcamak, hem yaratıcı hem de geliştirme ekibine gerçek şeyleri oluşturmaya odaklanmak için daha fazla zaman ve daha az baş ağrısı verir. Sonuçta daha iyi bir atmosfer yaratır ve tasarımcılar ile geliştiriciler arasında güven oluşturur. Tasarımla ilgili bazı alanlarda ilgi ve bilgi sahibi olan frontend geliştiricilerin sesi tasarım toplantılarında daha çok duyulacaktır.

Tasarımcılar ve geliştiriciler arasında bir uzlaşma bulmaya proaktif olarak katkıda bulunmak ve bir geliştirici olarak problem çözme, size tüm projeye daha geniş bir sahiplenme ve katılım duygusu verebilir. Günümüzün gelişen yaratıcı endüstrisinde bile, teknik becerilerinin yanı sıra görsel ayrıntılara önem veren ve dikkat eden geliştiriciler bulmak kolay değil. Bu, ekibinizdeki boşluğu kapatmanıza yardımcı olacak bir fırsat olabilir.

alakalı kaynaklar

• “Doğru Prototipleme Aracı Nasıl Seçilir,” Javier Cuello
• “Mobil Web Tasarımında Tipografi İçin Bir Başvuru Kılavuzu,” Suzanne Scacca
• “Butterick'in Pratik Tipografisi,” Matthew Buterick
• “Birlikte Çalışmak: Tasarımcılar ve Geliştiriciler Daha İyi Projeler Yaratmak İçin Nasıl İletişim Kurabilir” Rachel Andrew
• “Geliştiriciler İçin Tasarım,” Sarah Drasner, Frontend Masters
• Oliver Reichenstein "Web Tasarımı %95 Tipografidir"
• “Göremiyorum” Görsel ayrıntıları tanıma duygunuzu eğitmek için bir tarayıcı testi.