Web tasarımcılarının kodlamanın nasıl yapıldığını bilmeleri gerekiyor mu?


31

Bir web geliştiricisi olarak hem ön uç hem de arka uç mimar olarak, pek çok farklı tasarımcıyla çalışıyorum ve bazen tasarımı temel CSS ve HTML'de nasıl başarılacağına dair hiçbir düşüncenin bulunmadığı tasarım kompozisyonlarıyla çalışmak sinir bozucu buluyorum. Diğer taraftan, geliştirici olarak herhangi bir tasarımdan kod üretebileceğimi umuyorum.

Web tasarımcılarının temel modern CSS ve HTML tekniklerini bilmeleri gerekiyor mu? Çok iyi bir web tasarımcısı için bu neden önemli veya neden önemli değil?

Bazı genel düşünceler:

  • Ön uç web geliştiricileri, herhangi bir tasarımı kodlayacak kadar yetenekli olmalıdır.
  • Web tasarımcıları, kullanıcıların tasarımlarıyla gerçekte nasıl etkileşime gireceklerini anlamalıdır.
  • Tasarım dükkanları tasarımcıların tasarımını yapmalı ve tüm kodlamaları geliştiricilere bırakmalıdır.

5
tanımladığınız şey grafik tasarımcılardır, web tasarımcı değil.
Jin,

Ortası olmayan tasarımcılar, enstrümanı olmayan besteciler gibidir.
Adam

Deneyimlerime göre, herhangi bir web veya yazılımın etrafında 'ön uç', UI, GUI veya INTERFACE anlamına gelir. Demek istediğin bu mu?
user179700

Yanıtlar:


23

Web tasarımcılarının temel modern CSS ve HTML tekniklerini bilmeleri gerekiyor mu?

Evet.

Çok iyi bir web tasarımcısı için bu neden önemli veya neden önemli değil?

Evet kelimesini cevapladım çünkü temel kelimeyi kullandın .

Web tasarımcılarının temel HTML ve CSS tekniklerini bilmesi kesinlikle önemlidir, aynı şekilde mimarlar da fizik ve malzeme bilimi hakkında bir şeyler bilmeli, baskı tasarımcıları CMYK baskı işlemi hakkında bir şeyler bilmeli ve moda tasarımcıları kumaş hakkında bir şeyler bilmeli.

CSS ve HTML teknikleri hakkında hiçbir şey bilmiyorsanız , kendinize "web tasarımcısı" diyemezsiniz. Sen sadece bir ressam ya da başka bir şeysin.

Düşünceleriniz hakkında yorumlar:

Ön uç web geliştiricileri, herhangi bir tasarımı kodlayacak kadar yetenekli olmalıdır.

Yanlış. Bu bir aşırı basitleştirmedir. Bazı şeyler ağa iyi tercüme etmez. Bazı tasarımlar parçalara ayrılabilir veya desteklenmesi gereken belirli bir platformda veya ekran boyutunda çalışmayabilir.

Bir web tasarımcısının, izleyici ve performans gereksinimlerine bağlı olarak sınırlamaları bilmesi gerekir. CSS ve HTML'yi bilen bir tasarımcı, tasarımın nasıl ayarlanacağını bilir, böylece temel kod mümkün olduğu kadar duyarlı ve verimli hale getirilebilir.

Web tasarımcıları, kullanıcıların tasarımlarıyla gerçekte nasıl etkileşime gireceklerini anlamalıdır.

Tamamen farklı bir disiplin olan UX Design'ı tanımladınız . Kullanıcı Deneyimi Tasarımı, Grafik Tasarımın özelliklerini içermesine rağmen, CSS veya HTML ile gerçekten çok az ilgisi var.

İyi tasarlanmış web tasarımcılarının UX Design ile aşina olmaları gerekirken, UX uzmanlarıyla işbirliği yapmaları da yaygındır.

Tasarım dükkanları tasarımcıların tasarımını yapmalı ve tüm kodlamaları geliştiricilere bırakmalıdır.

Bu kısmen doğru olabilir ama tamamen değil. İçerik yönetim sistemlerinde popüler olan bir paradigma MVC'dir (model / görünüm / denetleyici). Pek çok tasarım mağazası, tasarımcıların HTML / CSS kodlamasına aşina olmalarını ister, böylece geliştiriciler model / denetleyiciye odaklanırken içeriğin sunumuna ("görünüm") odaklanabilirler.

Bu, bazı dükkanların sadece grafik unsurlara odaklanan ve etrafına pikselleri iten Grafik Sanatçıları kullanmadığını söylemek değildir - benim görüşüme göre Web Tasarımcıları değiller. Büyük bir web sitesi, tamamlanmış bir web sitesi üretmek için işbirliği yapan Grafik Sanatçıları, Web Tasarımcıları, UX Tasarımcıları, Web Geliştiricileri ve Veritabanı Uzmanlarını kullanabilir. Daha küçük siteler oluşturan bir freelancer tüm disiplinlerde engel olabilir ve kendilerini bir Web Tasarımcısı / Geliştirici olarak adlandırabilir.


17

Bir web tasarımcısı, kodun nasıl çalıştığını ve neler yapabildiğini anlamalıdır, aynı şekilde bir baskı tasarımcısı da kağıdın üzerindeki mürekkebin nasıl görüneceğini ve kağıdın nasıl katlanabileceğini veya kesilebileceğini anlayabilmelidir. Herhangi bir tasarımcı, seçilen ortamın sınırlarını ve güçlü yönlerini anlamalıdır.

Eğer bir web tasarımcısı bu harika kesikli muhteşem siteyi yaratıyorsa, kodlamanın temellerini öğrenmek veya bir görkemli sitenin elde edilebildiğini kontrol etmek için işlem sırasında birkaç noktada bir kodlayıcı ile oturmak ister. Bu yüzden en azından bir web tasarımcısının kod hakkında bilgi sahibi olması gerektiğini söyleyebilirim .

"Bir geliştiricinin herhangi bir şeyi kodlayabildiğini" söylemenin bence, aynı şekilde basılabilecek herhangi bir şeyin HTML / CSS kullanarak web üzerinde de tam olarak üretilebileceğini söyleyemezsiniz.


1
+1, özellikle " kod hakkında bilmesi gerekenler" için. Bir kod satırı yazamayan, ancak aracı hakkında bir anlayışa sahip olan ve geliştiricinin söylediklerine saygı duyacak kadar açık olan insanlarla çalıştım. Her zaman çok iyi çalıştı.
Pekka GoFundMonica'yı

6

Lauren, Ghoppe ve Farray herkes çok konuşurlar, bu yüzden dediklerini hiçbir şekilde yeniden yorumlamayacağım. Pratiklik meselesi olarak, açık ve kapalı sorularınız için başka bir görüş daha sunmama izin verin.

Bir geliştirici için en iyi yaklaşım, Gutenberg'in ilk tipini kestiği için matbaacıların davul çırpmasıyla aynıdır: Tasarımcının sizi projeye en başından itibaren dahil etmeleri konusunda ısrar eder. Tek bir piksel ekrana çarpmadan önce tartışmaya katılmanız gerektiğini açıkça belirtin.

Olağandışı bir şey içeren bir baskı tasarımı projesinde olduğumda, hemen yazıcıyla görüşüyorum ve ciltçilerle görüşüyorum. Yaptıkları iş hakkında benden çok daha fazla şey biliyorlar, bu yüzden işe başlamalarını sağlamak için işimi yapıyorum. Ne yazık ki, tasarımcılara özellikle okuldan yeni çıktıklarında ve henüz gerçek dünyayla tanışmadıklarında, bazen basit bir adım atıyor ve hayat kurtarıcı olmadan derin kimshee ile son buluyor.

Bloglarda, forumlarda, müşterilerle ve proje yöneticileriyle, yerel okullar ve kullanıcı gruplarıyla ve menzil içindeki herhangi bir tasarımcıyla kampanya oluşturma: "Tasarıma başlamadan önce geliştiricinizle konuşun!"

Bir geliştirici ne istediklerini hiçbir ipucu olmayan tasarımcılardan kompozisyonlar alacak, tıpkı baskı öncesi departmanlarının bazen kullanılamayan sanat eserleri elde etmesi gibi (ve tasarımcılar sadece mazoşistin izleyeceği özetleri alır). Ancak planlama masasında bir yerde ısrar ediyorsanız, çok fazla hayal kırıklığı ve boşa harcanan zamanı önleyebilirsiniz.


Kesinlikle! Bir geliştirici olarak, belirli bir tasarımın fizibilite ve uygulama maliyetleri hakkında geri bildirim vermeyi seviyorum. Bir tasarımın bir kısmının neden __f__ible olduğu ile ilgili daha ayrıntılı olabilir , tasarımcılarımın gelecekte daha iyi (daha az maliyetli) tasarımlar oluşturmasına yardımcı olur. Bu nedenle, tasarımcılar kod yazmasalar bile, bunun hakkında iletişim kurabilmeli ve geliştiricilere sunulan çerçeve / araçların inceliklerini anlamaya çalışmalıdırlar. (Ne kadar
iyilerse

1
İronik olarak, yakın zamanda, geliştiricinin üç kurumsal bürokrasinin arkasında bulunduğu ve tamamen erişilemediği bir web sitesi için tasarım aşamasını tamamladım. "Tasarım dosyalarını hangi biçimde tercih edersiniz?" Sorusuna cevap vermek haftalar sürdü. - Müşteri sorunlarına yol açacak en tatmin edici çalışma şekli. Şansınız varsa, yakında bir epifani olacak.
Alan Gilbertson

5

Evet ve hayır. Hedef ortamınızın nasıl çalıştığını bilmek önemlidir, ancak sistemin bu şekilde çalışmasını sağlamak için gereken belirli kodu anlamanız gerçekten önemli değildir. Başka bir deyişle - Bütün önemli tarayıcı motorlarında yuvarlatılmış köşeler oluşturmak için belirli sözdizimi hakkında endişe olmaz, ama sen olmadığını anlamak önemlidir o dikkate alacağını olabilir tüm önemli tarayıcılarda yuvarlatılmış köşeler oluşturmak (ve ne kadar kodu gereklidir böyle yaparak).

Örneğin, birkaç yıl önce IE6'ya hâlâ üzüldük. Kurumsal bir intranet uygulaması için çok güzel bir tasarıma sahiptik, ancak şeffaf kaplamalara son derece bağlıydı. IE6, PNG8'leri görüntüleyebilir, ancak PNG24'lerde alfa kanalına saygı göstermiyordu ve ActiveX filtreleri ve diğer sorunları gerektiren CSS tabanlı opaklığı kullanıyordu. İstenilen etkiyi elde etmek için çemberler atlayabilir, ancak her bir çember daha uzun gelişme döngüsü, daha yüksek hata oranı, daha zor bakım vb. Anlamına gelir. Ayrıca, N + 1 sürümünde çalışmak yerine, geliştirici saatlerini çok kodlu bir kod tabanı ekleyerek fırsat maliyeti de vardı.

Bu tür durumlarda, bir tasarımdaki her görsel efektin maliyeti / faydası ölçülmelidir:

  • Görsel efekt ne kadar şaşırtıcı?
    İnşaat kaynakları gerektirmeyen, aynı derecede etkili bir görselle değiştirilebilir mi?

  • Etki, hedefte doğru şekilde çoğaltılabilir mi? Orijinal tasarımınız hedef tarafından doğru bir şekilde yeniden oluşturulamıyorsa, tasarımınızın mümkün olan en yakın yaklaşımla değiştirilmesi gerekir. (Neyse ki bu web tasarımcıları için bir sorun daha az oluyor.)

  • Ne kadar zaman ayırdınız?
    Arzu ettiğiniz etkiyi elde etmek için İnşaat'ta daha fazla çalışma saati alabilir misiniz? Değilse, özelliği daha kısa sürede yeniden tasarlayabilir misiniz?

  • Görselinize uyum sağlamak için kod tabanının ne kadarının yenilenmesi gerekecek?
    Tasarım ve İnşaat aynı anda gerçekleşiyorsa veya eski bir uygulamayı kullanıyorsanız, kodlayıcıların görselinizi birleştirmesi ne kadar zor olacak? Yalnızca yeniden yazma işlemini yapmak için harcanan saatler değil, aynı zamanda yeni değiştirilen kodun hata ayıklaması ve bakımıyla ilgili olası saatler.

Yukarıdaki madde işaretleri ile listede olmayan diğer noktalar arasında bir miktar örtüşme var. Mesele şu ki, bu kısa listede bile dikkate alınması gereken işletme maliyetleri var. Hedef sistemin gerçekte nasıl çalıştığını kavrarsanız, durumu daha verimli bir şekilde değerlendirebilirsiniz.

Tasarımınızı yapmadan önce CSS veya HTML'in sınırlarını anlıyorsanız, inşaat aşaması boyunca sorunsuz bir şekilde akacak tasarımları oluşturabilirsiniz. Ayrıca, tasarımınızın uygulanabileceğine ve yaklaşık maliyeti bilmenin gücüne de güveneceksiniz. Bu senin yanında olmak için her zaman kullanışlıdır.


5

Tecrübelerime göre (kodlayıcıyım, tasarımcı değilim), web tasarımcısının kod hakkında bilmesi gereken bir soru değil. Ancak çalışmalarının bir tarayıcıda nasıl uygulandığını bilmeleri gerekir.

Web / tarayıcılar hakkında yeterli bilgiye sahip olmayan tasarımcılarla ilgili en büyük sorun, güzel görünen tasarımlar oluşturmalarıdır, ancak gerçekten tarayıcıda çalışmaz. Bazılarının dikkate almadığı şeylerden sadece birkaçı:

  • Yazı tipi kullanımı. Ortalama kullanıcının sahip olmadığı PhotoShop'unda yüklü yazı tiplerini kullanırlar. Veya Windows / Linux'ta olmayan Mac fontlarını kullanıyorlar.
  • Ekran / tarayıcı boyutuna saygı eksikliği. Tasarım daha küçük bilgisayarlarda gösterilmemiştir. Küçük notebooklar / tabletler daha popüler hale geldikçe, daha küçük ekran boyutlarını hesaba katma ihtiyacı daha önemli hale geliyor.
  • Tarayıcı ekranını yeniden boyutlandırdığınızda ne olmalı? Tasarımcı, tarayıcı yeniden boyutlandırıldığında tasarımda neler olması gerektiğini göz önüne aldı.
  • Peki ya kaydırma çubukları. Tasarım tipik olarak "lorem ipsum" yer tutucularla birlikte gelir. Bu yer tutucunun içine çok fazla metin girerse ve kaydırma çubuklarına ihtiyacımız olursa, onları nereye yerleştirmeliyiz?
  • Çok fazla resim var. Bazı tasarımlar çok fazla png kesmenizi gerektirir. Bu, ilk sayfa tarayıcının tüm bu png'leri indirmesini gerektirdiğinden web sunucusundan uzun yanıt sürelerine yol açabilir.

Tasarımcılar ile çalışırken gördüğüm sorunlar bunlar. Bunlar tasarımcı hakkında kod hakkında bir şey bilmemekle ilgili sorun değil. Ancak, tasarımın nasıl kullanıldığını düşünmemekle ilgili konular.


Yazı tipleri hakkında harika bir nokta. Makinemde yüklü yazı tiplerinin bile bulunmadığı yerlerde çalışacak PSD'leri aldım.
Chris_O

4

Ortada olanın daha geniş bir anlayışı içinde çalışmak her zaman birini daha iyi bir sanatçı ve zanaatkar yapar.

Ön uç gelişmeyi bilmeyen birçok web tasarımcısı, çok kötü bir web tasarımcısı oldukları için değil, sadece web tasarımcısı olmadıkları için çok çalışmak zorunda değiller. Bazı baskı geçmişine sahip grafik tasarımcılarıdır ve gerçek web siteleri yerine broşürler ve posterler oluşturmaya çalışıyorlar.

Banyonuzu yeniden şekillendirmek için bir peyzaj mimarı kiralamak gibi. Bir tasarım anlayışına sahipler ve muhtemelen bazı temel şeyleri anlıyorlar, ancak ön bahçenizi düzenlemede duşunuzu döşemekten daha iyi olma ihtimalleri çok yüksek.

On yıl önce, çoğu web sitesi hala fabrika kat montaj hatları gibi inşa edildiğinde, bir kişinin PSD'yi yapması, bir sonraki kişinin HTML'yi yapması ve bir sonraki kez DB eklemesi gibi bir şey büyük değildi.

Ancak bu günlerde, en ilerici web yapıları çevik bir süreçle yapılır ve ekipler, eklenen ilerici geliştirmeler, entegre arka uç ve ön uç sistemleri, reaktif web tasarımı gibi kavramların atıldığı vb. Bu nedenle, tasarım sürecinin çoğunun kodda olması gerekir . Prototip, kullanıcı testi, yinelemeli tasarım ya da neyin var, kod orta ve ekibin bunu anlaması gerekiyor.

Hayır, takımdaki herkesin jQuery eklentileri yazabilmesi gerekmez. Ancak takım en azından ne olduklarını bilmeli ve UX / Web Ekibi, üzerine yazacakları insanlar olmalı, nihayetinde tasarlandıkları her neyse inşa edilmelidir.


4

Evet. Bir sanatçı çalıştığı ortamı anlamalıdır, yağı ve tuvaliyle ressam, mermer ve keskili bir heykeltıraş veya HTML ve CSS'sine sahip bir web tasarımcısı olabilir.

Video oyunu sektöründe çalıştım. En iyi oyun tasarımcıları, ortamın sürekli değişen sınırlamalarını anlayan ve bunun için tasarlayabilen güçlü bir teknik eğilimi olan yaratıcı insanlardı. Bu aşınmayı yapamayanlar ve vizyonlarının sulandırılması uygulaması emmekle sonuçlanıyor.

Geçenlerde, tasarımcının arka planının tamamen basılı medyada olduğu bazı web geliştirmeleri yaptım. Sonuç, baskıda harika olurdu ama web sitesi olarak oldukça kötü çalıştı, oldukça güzel sayfalar oldu.


4

Benim için tasarımcı / geliştirici bağlantısının kesilmesi yıllar önce olan bir şeydi, ancak insanlar web tasarımının sadece bir maket yapmaktan çok daha fazlası olduğunu fark ettiler.

Benim için, birileri kendilerini bir web tasarımcısı olarak çağırdığında bekliyorum:

a) They can design a layout either in a image editing program, or in the browser
b) Can articulate their design choices, and have sensible reasons
c) Proficient (as opposed to basic knowledge) with HTML, CSS, and JavaScript.
d) Basic knowledge of server side programming

Bana göre, bir web tasarımcısı bir sitenin müşteri tarafı yaratabilecek kişidir.

Bir iyi bir web tasarımcısı bunların hepsine sahip olacak ve bunlar tasarım sürecinde yapmak nasıl seçimler anlayışı sitenin UX etkiler.

Birisi web geliştirici deyince bekliyorum:

a) Proficient with at least one server side programming language
b) Basic knowledge of server configurations
c) Basic knowledge of client side technology (JavaScript and AJAX implementations)
d) Basic knowledge of backend architecture

Bir iyi bir web geliştiricisi bunların hepsine sahip ve o yapar mimari seçimler sitenin ön uç ve kullanıcılara maruz işlevselliği etkileyecek anlamak mümkün olacaktır.

Ayrıca UX ve web tasarımından daha yatay olan diğer alanlarda da uzmanlaşan insanlar elde ediyorlar.

düzenleme: Herhangi biri, grafik tasarımını web tasarımından ayıran iyi bir tasarım grubunun örneğine sahipse çok ilgilenirim.


3

Tasarımcılar kodlamanın nasıl çalıştığı hakkında fikir sahibi olmalıdır . Bazen bu cani gitmekten onların ön uç geliştirici önlemenin tek yolu . Bu fikri elde etmek için doğrudan deneyim en kolay yol olabilir.

Kesinlikle başkaları da var ama küçük bir Javascript programlamayı öğrenmek işinize zarar veremez. (Aslında zamanlar değişiyor ve kendi DOM'lerinden çıkmak için javascript edebilecek tasarımcı becerilerine sahip adam lejyonları var , ama bu tamamen farklı bir hikaye)

Genel düşüncelerim:

  • Ön uç web geliştiricileri, tasarım inceliklerini incelemek için korkunç arka uçlar ve birçok farklı özelliklerle uğraşmak zorundadır. Bu özyönetmelerin çoğu , yönetim tarafındaki pre-fab arka uçlarının kötü seçimlerinden kaynaklanır ve uğraşmak için çok fazla zaman harcar.

  • Web tasarımcıları bu kadar stresli bireylerle uğraşırken sürekli hayatlarını tehlikeye atarlar. Ve tasarımını masalarına bırakmak ve ofise çığlık atmak yerine, bazı ön uç meselelerinden bazılarını ciddiye almalı "Artık bitti, işim bitti, bundan böyle dev suçu! "

  • Tasarım dükkanları yanmalı.


2

Nerede çalıştığınıza bağlı.

Büyük bir şirket için çalışıyorsanız, bunların tümü bireysel roller olabilir:

  1. UX veya Mimari Uzmanı - sitenin bilgi mimarisini / organizasyonunu / tel kafesler yapmasını planlar

  2. Tasarımcı - siteyi photoshop veya başka bir araç kullanarak tasarlar

  3. Ön Uç Geliştirici - html / css / javascript / json / xml / etc yapar. ve ön ucu arkaya entegre eden şablon kodu yazar

  4. Arka Uç Geliştirici - her şeyin gerçekte dinamik olarak çalışmasını sağlayan programlama yapar

Çoğu orta seviye yer, tasarımcının UX kararlarını almasını gerektirir. Ancak daha küçük yerlerde tasarımcıya yukarıdaki 3 şeyin tümünü yapması gerekebilir. Bununla birlikte, ön uç zor bir alandır ve içinde farklı yetenek kümelerinden insanlar vardır. Ön ucu yapması gereken bir tasarımcıysanız, kesinlikle HTML / CSS ve JQuery veya başka bir çerçeve çalışmasından daha fazlasını bilmeniz beklenmez. Bir tasarımcının javascript ve arka uç entegrasyonunun daha derin yönlerini bilmesini beklemek çok fazla şey istiyor.

Tabii eğer serbest çalışıyorsanız, her şeyi kendiniz bilmeniz ve yapmanız gerekir;)


1
OP, bir Web Tasarımcının da bir uzman kodlayıcı olması gerekip gerekmediğini sormuyor, bunun yerine, Web Tasarımcısının HTML ve CSS temellerini bilmesi gerekip gerekmediğini soruyor . Bir Web Tasarımcısı olsanız ve asla bir HTML veya CSS dosyasına dokunmanıza gerek kalmasa bile, tasarımınızın hedef kitleniz için bir web sitesi olarak bile mümkün olup olmadığını (veya bunun için mümkün olduğunu ) bilmek için yeterince bilginiz olmalıdır .
Shauna,

2

Bence web tasarımcıları, ortada çalışan web tasarımları ve web arayüzleri oluşturabilmek adına HTML / CSS'yi (sadece temelleriyle sınırlı olsa bile) bilmeli.

Web tasarımcıları HTML / CSS'yi kendileri yazmamayı seçebilir, ancak işaretleme ve CSS'nin nasıl çalıştığını bilmek bir web tasarımcısı olmak için çok önemlidir. Web tasarımcılarının HTML / CSS ninjaları olması gerekmeyebilir, ancak web düzeni kompozisyonlarının bir web sitesine nasıl dönüştürüldüğünü bilmek (en azından) iyi şekilde hizmet eder.


1

Web tasarımcılarının kodlamanın nasıl yapıldığını bilmeleri gerekiyor mu?

Evet, web tasarımcısı web için bir tasarım oluşturmak için Adobe Photoshop, Illustrator ve InDesign gibi yazılımlarla uğraşmak zorundadır. Sonra bu tasarım çevrimiçi yapmak için kodlama ile ilgilenir. Ve bunun için, web tasarımcısının oradaki tasarımın bileşenlerini kodlama olarak anlaması çok önemlidir. Bunun için kodlama bilgisine sahip olmalılar, tam olarak anlamıyorlar, ama temelleri var.


0

Şahsen, hepsi sizin becerilerinize ve gereksinimlerinize bağlıdır. Becerileri hızlı bir şekilde öğrenip kavrayabilme. Gereksinimler finans olmaktır. Bir şey öğrenmek zamana ihtiyaç duyar.

Öyleyse öldürmek için çok zamanınız varsa, devam edin ve kodlamayı öğrenin.

Son dört yıldır tasarımcıyım ve temel şeyleri düzenlemede iyiyim. Ben sadece kodu pro yolunu öğrenmek için yeterli zamanım yok.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.