Hey tasarımcılar, geliştiricilerinizi deli ediyor musunuz?

Şanslar, özellikle kod için iyi çevirmeyen bazı alışkanlıklara sahip olmanız ve projelerde sizinle birlikte çalışan geliştiricinin hayatı zorlaştırmasıdır. Daha iyi bir arkadaş (ve arkadaş) olmak ister misiniz?

Geliştiricilerin sizi sevmesi için nasıl daha iyi iletişim kurulacağını ve nasıl tasarlandığını öğrenin. Projeleri hızlandıracak ve iş hayatını kolaylaştıracak. Ve bu da toplantılara şeker getirme meselesi değil. Geliştiricilerin, çalışma şeklinizde ufak değişiklikler yaparak sizi sevmesini sağlayabilirsiniz.

1. Geliştiricileri Erken Olarak Getirin

Tasarımcılar ve geliştiriciler arasındaki en büyük sorun, genellikle kabarcıklar halinde çalıştıklarıdır. Bireyler veya ekipler, tasarımın ilk taslağı bitinceye kadar bir proje hakkında konuşmaya başlamaz. Sonra tasarımcıdan geliştiriciye bir el atışı var.

İç çekmek.

Bu iş için yol değil. Tasarımcılar ve geliştiriciler, bir projenin nasıl bir araya geleceği hakkında konuşmak için başlangıçtan itibaren birlikte olmalıdırlar. Tasarımcı renk ve yazı ve görüntülere odaklanabilirken, geliştirici kullanılabilirlik, işlev ve performans hakkında bilgi sağlayabilir.

Tasarımcılar ve geliştiriciler, diğer tarafın neye benzediğine dair iyi bir fikre sahip olmalıdır. Tasarımcılar, geliştiricilerle konuşmak ve zorlukları anlamak için yeterli kod ve kullanılabilirlik anlamalıdır; Tasarımcılar, tasarım fikirleri web için doğru olmadığında önerilerde bulunabilmeleri için tasarım teorisi hakkında çok az bilgi sahibi olmalıdır.

2. Uygulama Tutarlı Dosya Yönetimi

Bir tasarımcının yapabileceği en büyük şeylerden biri, her seferinde aynı şekilde hazırlık ve paket dosyalarıdır.

Yüzlerce adsız katmanı olan bir Photoshop belgesini kaç kez açtın? Bu tür bir dosyayı geliştiriciye vermeyin. Her katman ve stil — kullandığınız yazılımdan bağımsız olarak - uygun şekilde adlandırılmalıdır.

Yüzlerce adsız katmanı olan bir Photoshop belgesini kaç kez açtın?

Stiller, renk örnekleri ve tipografi tasarım boyunca tutarlı olmalıdır. (Bir düğme sayfadan sayfaya farklı görünmemelidir.)

Her proje için aynı şekilde dosya ve stilleri adlandırın. Benzer şekilde elemanlar gibi gruplandırın ve tutarlı bir klasör sistemi kullanın. Bu şekilde geliştiricinin, her yeni proje ile parçaları ve öğeleri nasıl bulacağını yeniden öğrenmesi gerekmiyor.

3. Google Yazı Tiplerini Kullan

Baskı ve dijital parçaları içeren tasarım projelerinin en büyük zorluklarından biri tipografi yönetimi. Web veya uygulama tasarımları için baskı projeleri için masaüstü yazı tiplerini kullanmayın ve sadece bunların çalışacağını varsayın. (Genellikle olmazlar.)

Dijital projeler için, tipografi için Google Yazı Tiplerini tercih edin. Bu, web için baskı için kullandığınız şeyle eşleşecek benzer bir yazı tipi bulmak zorunda kalabileceğiniz anlamına gelir. (Bu iyi.)

Geliştiricinin bunu senin için yapma. Karşılaştırılabilir Google Yazı Tiplerini seçin ve bunları başlangıçtan kullanın. Stil rehberinizde dijital yazı tiplerine karşı baskı bile görebilirsiniz.

Bunun arkasındaki sebep basit: Yazı tiplerini gömmek biraz zor olabilir. Ayrıca, Google Yazı Tipleri ücretsizdir ve ek proje maliyetlerine maruz kalmamanızı sağlayacaktır. (Bununla birlikte, simgelerle aynı şeyi yapmayı düşünün ve geliştiricinin CSS kullanarak simgeleri bir grup görüntü dosyalarını içe aktarmasına izin veren, Yazı Tipi Başarısı gibi bir paketi kullanın!)

4. Paket İmajı Varlıkları

Görüntü varlıklarının konusu olmakla birlikte, dosyaları doğru bir şekilde dışa aktarmak ve paketlemek çok önemlidir. Bir geliştirici tüm görüntü dosyalarını kendi gereksinimlerini karşılayacak şekilde açıp dışa aktarabilirken, neye ihtiyaç duyduklarını sorabilir ve yol boyunca bunu yapabilirsiniz.

Bu, web sitenize hızlı bir şekilde yüklenmesine yardımcı olmak için dosyaları sıkıştırırken, görüntülerde istediğiniz ekinleri almanızı sağlar.

Bunu kendi başına yapmaya çalışmayın. Geliştiriciye dosyaların en iyi şekilde nasıl saklanması, adlandırılması ve sıkıştırılması gerektiğini sorun.

5. Çevre hakkında düşünün

Web siteleri ve mobil uygulamalar tasarlanırken düşünülecek çok fazla cihaz boyutu ve en boy oranı vardır. Bir tasarımcı olarak, aslında kullanılabilir olan bir mockup oluşturmak için tuval boyutunu, kenar boşluklarını, dolguyu, vs. bilmeniz gerekir.

Başlamadan önce tasarım ortamının nasıl göründüğünü bildiğinizden emin olmak için çizim yapmaya başlamadan önce geliştiriciyle konuşun. Photoshop veya Sketch'de harika görünen ve üretimde düz düşen bir tasarımdan daha kötü bir şey yoktur.

Bu şeyleri önceden bilmeniz gerekir:

  • Çerçevenin farklı boyutlarda spesifik dolgu özellikleri varsa
  • Sütunlar arasındaki oluk genişliği (ve değiştiğinde)
  • Geliştiricinin kodladığı en dar ekran boyutunun boyutu

6. Sorular sorun

Zaten birkaç kez bahsedilmiştir, ancak tasarımcı ve geliştirici arasındaki iletişim gerçekten bu işi yapmak için anahtardır. İletişim projeleri oluşturabilir veya bozabilir, son teslim tarihlerini etkileyebilir ve son proje tasarımını ve işlevselliğini etkileyebilir.

İletişim projeleri yapabilir veya kırabilir

Geliştiricinizi öğle yemeğine alın. Onları tanımak. Yol boyunca birçok soru sorun. Bir şeyin işe yarayıp yaramayacağından emin değilseniz, sadece sorun. Geliştiriciler korkutucu insanlar değiller ve süreci yeniden düşünmek ve tüm konsept için olmaktan çok bir soruya cevap vermek çok daha kolay.

7. Bazı Dev Temellerini Öğrenin

Geliştirici ile konuşurken ve sorular sorarken, daha derine dalın. Bu becerileri tasarım arsenalinizde yoksa, bazı geliştirme temellerini öğrenin.

Dijital projelerde çalışan tasarımcılar kendilerini aşağıdaki gibi yorumlamalıdır:

  • HTML ve CSS (yazı tipi boyutunu veya rengini değiştirebilmeli ve ikisinin farklı olduğunu anlayabilmelisiniz)
  • Ortak kullanıcı kalıpları (kullanıcıların içerikle etkileşime girme şekli)
  • Erişilebilirlik standartları (böylece tasarımınız daha fazla kullanıcı için çalışacaktır)
  • Resimler olarak hangi tür öğelerin sunulması ve saf CSS kullanılarak nelerin oluşturulabileceği
  • Kesme noktaları duyarlı düzenlerde nasıl çalışır?
  • Web sitesi tasarımında trendler

Asla kod yazamazsınız, ancak geliştirme ilkelerini öğrenmek size daha iyi bir tasarım yapacaktır çünkü araçların ve iş akışlarının değerini anlayacaksınız.

8. “Yaşam Tarzı” Kılavuzunu Kullanın

Tasarım süreci de gelişime uzanır. Tasarımcılar, geliştiricinin olduğu gibi tasarım sürecinin de hayati olduğunu kabul etmelisiniz.

Bunu akılda tutarak, sadece renk ve yazı tiplerini değil, aynı zamanda bileşenleri de içeren bir “yaşam tarzı” rehberi oluşturun. Proje hayata geçtikçe herkes belgeye erişebilmeli ve güncellenebilmelidir.

İyi bir stil rehberi, bir projede çalışan herkesin görsel öğelerle tutarlılık sağlamasına, tasarım seçimlerine bağlam sağlamasına, proje için bir işbirliği noktası işlevi görmesine ve kodun standartlaştırılmasına yardımcı olur. Yaşam tarzı rehberi, herkesin fikirlerini paylaşmasına ve bir proje boyunca rehberlik etmesine olanak tanır. Bir tasarımın hayata geçmesinden hemen önce birisinin yarattığı bir belge değildir.

En iyi şekilde yararlanmak için aşağıdaki bilgileri stil kılavuzuna yerleştirin:

  • Logo stilleri
  • Renk paleti
  • Yazı tipi paleti
  • Simge paleti
  • Gezinme menü öğeleri (ve orada bağlantı kurarlar)
  • Farklı sayfalar için düzen seçenekleri
  • Site genelinde yeniden kullanılan kod parçacıkları (düğmeler gibi)

9. Izgarayı Kullanın

Izgaraya saygı göster. Duyarlı web sitesi tasarımında, ızgara, ekrandaki öğelerin yerleştirilmesi için bir kılavuzdan daha fazlasıdır; öğelerin farklı ekran boyutlarında nereye gittiğini ve sütunların nasıl yığılıp karıştırılacağını da belirleyebilir.

Izgara, akışı tasarlamanıza ve korumanıza yardımcı olabilir. (Asıl mesele, tasarım kurallarını keyfi olarak ihlal edememenizdir.)

Bunun gibi düşünün: Tasarımınız, tam ekran bir masaüstü monitörde üst üste dizilmiş dört içerik bloğuna sahiptir (eşit oluk genişlikleri ile). Daha sonra bir tablette, bu bloklar iki sırayla iki sütun oluşturacak şekilde değişir. Bir mobil cihazda, dört sıralı tek bir sütun oluşturacak şekilde değişirler.

Kılavuzun nesnelerin boyutunu nasıl etkilediğini ve nesnelerin farklı cihazlarda nasıl değişeceğini anlamak önemlidir çünkü sahip olduğunuz içerik için nasıl tasarlandığınızı belirtebilir. Aynı senaryoyu tekrar düşünün. Beş içerik bloğu olsaydı ne olurdu? Tutarlı bir görsel taslak oluşturduğunuzdan emin olmak için bir yeniden tasarım gerektirecektir.

10. bir pislik olmayın

Projelerin kolaylıkla sağlanması için gerçek anahtar esnek olmaktır. Web için tasarım teknikleri ve standartları her zaman değişir. Bazı projeler detaylar ve unmoving için bir stickler olmasına izin verirken, duyarlı tasarım gerçekten bu şekilde çalışmıyor.

Geliştiricilerle çalışmaya gelince altın kural… bir sarsıntı olmayın.

Çalışması kolay tasarımcılar, daha fazla saygı görecek ve geliştiricilerle daha iyi ilişkilere sahip olacaklar. Bu daha iyi ve daha başarılı projelere yol açacaktır. Söylemeden gitmeli, ama çoğu zaman orada bir sürü pislik-davranış var. O tuzağa düşme.

Geliştiricinizle esnek olun, açık olun ve konuşun. Seni bunun için sevecekler.