Web Geliştirme Kavramları Tüm Web Tasarımcılarının Anlaması Gerekenler

Hakkında söylenecek çok şey var tasarımcılar ve geliştiriciler arasında bulunan uçurum. Verilen birçok tasarımcı / geliştirici melez vardır madalyonun iki tarafını da anlamak, ama onlar arasında çok az.

Yaratıcı projeler gelişiyor uygun iletişim. Ancak, tasarımcılar ve geliştiriciler nasıl yapacaklarından emin olmadıklarında bu zor olabilir birbiriyle konuşmak. Tasarımcıların doğru JavaScript yazmayı bilmeleri gerektiğini veya geliştiricilerin tipografi seçiminde ustalaşmaları gerektiğini sanmıyorum. Ama bazı var temel konular bence iki tarafa da gidelim.

Aşağıdaki konular benim kişisel olarak ilgilendiğim tüm tasarımcıların anlaması gereken hayati web geliştirme fikirleri. Kendimi bir tasarımcı / geliştirici olarak, her iki alanda da ne kadar kafa karıştırıcı olabileceğini biliyorum. Fakat her zaman öğrenme çabasına değer çünkü açık bir anlayış iletişimi geliştirir ve bir tasarımcıyı yaratıcı bir ekip için daha değerli kılar.

Ön Kod Davranışı

Web tasarımcılarının, genellikle tasarım yetenekleriyle birlikte ön becerilere sahip oldukları düşünülmektedir. Bu çok tartışılan bir konudur, çünkü çoğunlukla doğru cevap yok.

Tasarımcılar ne yapıyorsa onu yapmalı ile rahat. Bu sadece görsel tasarım çalışması yapıyorsa, öyle olsun. Ancak, ön uç teknolojilerinin kısa bir anlayışı aynı tasarımcıyı yapabilir daha sezgisel geliştiriciler için varlıklar yaratırken.

Her tasarımcının en azından anlaması gerektiğine inanıyorum. Ön uç kalkınmanın üç temel dili (HTML, CSS ve JS) nasıl kullanıldığı ile birlikte. Örneğin, çoğu açılır menü JavaScript'e güvenir, ancak yalnızca CSS seçenekleri de vardır.

Bir tasarımcı bir açılır menü hazırlarken, kodla uygulamanın karmaşıklığı. Hangi öğelerin JavaScript gerektirdiğini anlayan bir tasarımcı, geliştiricilerden ne inşa etmelerini istediklerini anlamak için daha iyi hazırlanabilir..

Bu mümkün tek bir kod satırı yazmayı öğrenmeden.

CSS yapılır web sitesi stil. CSS animasyonundan ve CSS'den daha çok statik Görsellerin çoğunluğunu yaratır sayfada. En dinamik özellikler JavaScript ile oluşturulur.

Bu bölünmeyi anlayabiliyorsanız, tasarım çalışmasına bilinçli bir çaba gösterecektir. Ayrıca, UX hareket tasarımcılarını bir arayüzü canlandırmak için ne kadar iş yapıldığını düşünmeye zorlar..

Duyarlı Teknikler

Her web tasarımcısı en azından terimi bilmeli duyarlı tasarım. Bu, web sitelerinin farklı ekran boyutlarına adapte, her birine farklı bir düzen ait. Yeni bir düzen uygulandığında cihaz boyutları kesme noktaları ile tanımlanır, CSS dosyalarına bir tanesine eklendi.

Kesme noktaları bir belirli piksel genişliği (ve / veya bazen yükseklik), mizanpajın bu ekran boyutuna uyacak şekilde ayarlandığı minimum veya maksimum. Böylece, duyarlı bir düzen 1080px monitörde 320px akıllı telefondan farklı görünecek.

Sınır değerlerin gerçek sitelerde nasıl çalıştığını görmek için Medya Sorguları web sitesine bakın..

Tasarımcı olarak göreviniz, her kesme noktasının nasıl olabileceğini düşünmektir. mockup'ı etkilemek. Her biri birkaç kompozisyon tasarlama görevinde bulunabilirsiniz. farklı ekran boyutlarına uydurma.

Bir CSS sınır değerinin mizanpajın değiştiği koşulları tanımladığını anladığınızda, bu varlıkları geliştirme ekibine teslim etmek için çok daha kolay bir zamana sahip olursunuz..

Tasarımlarla Modüler Düşünün

Geliştiriciler her zaman istiyor yeniden kod bu yaklaşım mümkün olduğu kadar mümkün daha az ayrıntılı ve dosya boyutlarını azaltır - Aslında önemli bir kod optimizasyon tekniğidir..

Modüler tasarım dışında web sitesi oluşturma yöntemini açıklar “modüller” Bu olabilir zaman içinde yeniden. Düğmeleri, form girişlerini, başlık stillerini veya süslü stillerle blok alıntıları düşünün.

Eğer sen tasarım öğeleri modüler olarak, geliştiricilerin mizanpajı kodlaması kolaylaşır yeniden kullanılabilir CSS sınıfları. Nerede olabileceğinizi düşünmek her zaman iyi bir fikirdir makul derecede yeniden aynı renkler, dokular ve sayfa öğeleri, ancak bununla ilgili akıllı olmanız gerekir genel estetiğe zarar vermemek.

Eğer daha iyi açıklama geliştiricilerin yapabilmeleri için farklı örnekler arasında hangi öğeleri kopyaladığınızı Sitenin bu bölümlerini tekrar kodla işaretleyin - gelişimi daha hızlı ve basit hale getirmek.

Modüler tasarım ile ilgilidir atom tasarımı, Her iki yaklaşım da geliştiricilere yöneliktir. ancak görüntüleme Kodun nasıl çalıştığını anlamanıza yardımcı olabilir; modüler tasarımı görselleştirmek birkaç örnek görmek için bu yazıya göz atın.

Retina Görüntülerini ve SVG'yi Anlayın

Genellikle, görüntüleri hazırlamak, gerekli fotoğrafları çekmek ve sıfırdan simgeler tasarlamak tasarımcının işidir. Bu, tasarımcıların yalnızca görsel varlıkların teslimi bu geliştiriciler sonunda mizanpajı kodlar. Bu yüzden anlamak önemlidir retina boyutları ve için retina destekli varlıkları geçmek Son mockup (lar) ile birlikte geliştiricilere.

Retina tasarım iş akışları hakkında daha fazla bilgi edinmek istiyorsanız, bu Smashing Magazine yazısını şiddetle tavsiye ediyorum. Retinize Yapabilen ücretsiz Photoshop eylemleri koleksiyonudur. otomatik olarak retina sürümleri oluştur Varlıklarınızın.

Çoğu tasarımcı zaten desteklemeyi biliyor @ 2x görüntüler, ancak yeni iPhone 6+ cihazların @ 3x çözünürlük. Bununla birlikte, bazı projeler @ 3x görüntü boyutuyla uğraşmaz, bu nedenle herhangi bir varlığı sonlandırmadan önce proje liderinizle konuşun.

Dikkate alınması gereken son bir şey SVG'nin ilerlemesi internette. Tüm modern tarayıcılar bir SVG'yi destekler. vektör tabanlı görüntü formatı. Bu, SVG simgelerinin olacağı anlamına gelir herhangi bir kalite kaybı olmadan otomatik ölçeklendirme, bu yüzden SVG grafikleri için retina varlıklarına ihtiyacınız yok.

Her yaratıcı ekip web tasarımı için SVG'lerle gitmeye istekli değil. Bunlar tarayıcılar tarafından kesin olarak desteklenir, ancak bazı durumlarda uygulaması zor olabilir. Bu nedenle başarılı bir tasarımcı / geliştirici ilişkisi için iletişim hayati önem taşımaktadır..

Vektör grafikleri kullanmanın artılarını ve eksilerini tartışın ve her proje için neyin en iyi olduğuna karar verin. Bu özellikleri yalnızca anlayarak, geliştiricilerle net bir şekilde iletişim kurabilecek ve hatta retina desteği için yerleşimi kodlamalarına yardımcı olacaksınız..

Erişilebilirliği Anlayın

İlerici geliştirme ve zarif bozulma aynı sorunu çözmenin iki farklı yolu vardır: erişilebilirlik. Tüm kullanıcılar, bir web sitesinin dinamik özelliklerinin% 100'ünü destekleyen cihazlarda veya tarayıcılarda bulunmayacak.

Bu kullanıcılar hala bir işe yarayan deneyim, ve bunun doğru kodlama ile ele alınması gerekir. Bazı ekran okuyucular, tüm JavaScript ve CSS kodlarını görmezden gelebilir, ancak web sitesi hala çalışması gerekiyor.

Son zamanlarda kapsayan bir yazı yaptım ilerici gelişme ayrıntılı olarak, benim tercih ettiğim geliştirme yöntemi. İlerici geliştirme çok temel özelliklerle başlar, o zaman daha fazlası için çalışır “ileri” Özellikler.

Zarif bozulma o zıt yaklaşım nerede önce tüm ana özellikler tasarlandı, daha sonra kullanıcı JavaScript veya CSS'yi desteklemiyorsa geliştirici bu özelliklerin nasıl kullanılacağına karar verir..

Bir tasarımcının bu durumlardan herhangi biri için örnekler yapması istenmesi olası değildir. Ancak tasarımcıların bu terimleri ve ne anlama geldiklerini anlamaları önemlidir, çünkü onlar gelişim sürecini etkiler. Bu, özellikle erişilebilirliğin büyük bir endişe kaynağı olduğu projeler için geçerlidir..

Kapanışta

İsteğe bağlı olduğunu düşündüğüm için atladığım bazı konular var.. Sürüm kontrolü, hata yönetimi ve JavaScript animasyonları tasarımcıların içine dalmak isteyebilecekleri daha karmaşık konulardır.

Ancak, bu yazıda değinilen hususlar, tasarımcıların bir geliştirme ekibinin gereksinimlerini anlamalarına yardımcı olmaktan daha fazlasını sağlayacaktır. Sadece web geliştirme yüzeyini inceleyerek bakış açısı kazanmak fikirlerinizi iletmenize ve üretim sırasında ortaya çıkan sorunlara sempati duymanıza yardımcı olacak.

Daha fazla alakalı içerik arıyorsanız, bu yayınlara bir göz atın:

• Geliştiricilerle Etkili Bir şekilde İletişim Kurma (Smashingmagazine.com)
• Tasarımcıların ve Geliştiricilerin Birbirlerini Anlamayı Öğrenmelerine Yardımcı Olun (Uie.com)
• Kod Öğrenmek UX Tasarımcısı Olarak Size Avantajlar Veriyor (Jessicaivins.net)