Doğrudan HTML / CSS yazarken tam görüntü mock-up'la dalış yapmanın bir avantajı var mı?

Geçmişte, birçok şirket ve web tasarımcısı, minimum - tasarım, biçimlendirme, arka uç - iki ya da üç bölümden oluşan bir iş akışına sahipti. Bunlar genelleşiyor ve çizgiler biraz bulanıklaşabiliyor ... ama eminim özümü anladım.

Genellikle web tasarımcısı "yalnızca görsel" idi ve yalnızca Photoshop veya Fireworks gibi resim düzenleme yazılımında çok ayrıntılı bir model oluşturmaktan sorumlu olacaktı. Maket (ler), bir web sayfasının renk ve tür seçimlerinden arka planlar, simgeler, fotoğraflar ve kullanılacak diğer resimlere kadar her yönünü gösterir. Ancak "tasarımcı", gerçek inşaat ve uygulama ile asla ilgilenmedi. Sadece görünüşe odaklandılar.

Tasarım onaylandıktan sonra (bu resim dosyalarını inceleyerek) ikinci aşama üstlenildi - resim dosyalarının canlı HTML / CSS'ye dönüştürülmesi.

• Tek kişilik veya serbest bir ortamda, web tasarımcısı bazı iç uygulama seçenekleriyle dilimler kullanmış ve HTML'ye dışa aktarmış olabilir . Açık nadir durumlarda tasarımcı temel HTML / CSS sayfa çerçevelerini inşa edilebilir.

• Bazı kurumsal ortamlarda, bu maket web tasarımcısı ([Fireworks için] .png, .psd) katmanlı bir görüntü dosyası şeklinde kalacağını ve tasarımcı olurdu asla uygulanması dert herhangi biçimlendirme veya kodunu. "Tasarımcı", oluşturdukları bu görüntü mockup'ını uygulamak için HTML veya CSS'yi nasıl oluşturacaklarıyla hiç ilgilenmediler. Görüntü dosyaları , görüntü dosyasıyla eşleşen HTML / CSS'yi oluşturmaktan sorumlu olan bir "geliştiriciye" verildi / verildi .

Bazılarının hala bu şekilde çalışacağını hayal ediyorum. Bununla birlikte, işaretleme dillerindeki gelişmeler, yani CSS3 ve tarayıcı desteği iyileştirmeleri ile, çoğu durumda, tam bir web sayfasının raster bir gösterimini dikkatlice oluşturmak için harcanan zaman çoğu durumda büyük ölçüde yararsız olabilir.

Mevcut işaretleme ile birçok web tasarımı ihtiyacını doğrudan HTML / CSS üzerinden uygulamak çok kolaydır ve resim uygulamasının kullanılması, gerekebilecek küçük resim varlıklarını veya fotoğraflarını oluşturmakla sınırlıdır. (Bootstrap gibi kütüphaneler ve / veya şablonlar bu görüşü daha da artırdı.)

Kendi iş akışımda , özellikle olmadıkça, özellikle tam sayfa örneklerinden uzaklaştım . istenmediği . Bunu, tasarım hızını iyileştirmek ve neyin onaylandığını, nihayet tarayıcılarda yapılacaklara yakın olmasını sağlamak için yapıyorum. Aslında, birkaç yıldır tam sayfa mockup oluşturmadım. Ancak, bu yöntemi kullanan hala iş akışlarının olduğunu biliyorum.

Tasarım yapımı için doğrudan HTML / CSS'e dalmadan önce, görüntü düzenleme uygulamasında tam sayfa örnekler oluşturmanın gerçek bir yararı var mı ?

Tam sayfa örnekler oluşturmanın yararı, iş bölümüdür.

Hem tasarımcı hem de ön uç geliştiricisine sahip büyük şirketlerde, tasarımcının işi tasarlamak ve geliştiricinin işi kod yazmaktır .

Bu bölüme sahip olmak, tasarımcıya tüm zamanlarını web sitesi için bakma, hissetme ve arayüz üzerinde çalışarak harcamasını sağlar ve nasıl oluşturulduğuna dair hiçbir şey bilmek zorunda değildir. Daha yüksek kalitede tasarım yaratabilir ve kararları daha uzun süre düşünebilirler, çünkü aynı anda istediklerini yapmak için kod alma konusunda çalışmamaktadırlar.

Ayrıca, geliştiricinin küçük detaylar ve değişken durumlar dahil olmak üzere herhangi birinin nasıl görüneceğini düşünmek zorunda kalmadan daha fazla kod yazmasını sağlar. Tasarımı, verilen sürede mümkün olan en iyi şekilde uygularlar ve başka bir projeye geçebilirler.

Tasarımcı Eğer bir sıra geliştirici, onlar testi şeyler dışarı hızla yinelerler daha kaba bir ürün oluşturmak ve bu çoğu insan az ya da çok sizinle yan başlıyor düşünüyorum. Bu, piksellerin kusursuz bir photoshop belgesi oluşturmanın aksine fikirlerin hızlı bir şekilde test edilmesini sağlar.

Ancak, kaba, tekrarlanan tasarım olmadan kod özellikle düzenleri ve çalışma akışı için geçerli ve inanılmaz faydalı bir yaklaşım aynı zamanda. Biçimlendirme dilleri ve yeni teknoloji, kaba fikirlerle çabucak çalışmayı icat etmedi :)

Bu cevabı kullanarak Guffa'yı seçeceğim. Açıkça söylemek gerekirse, Guffa'yı dışarı çıkarmaya çalışmıyorum, ama bunun yerine, madde işaretli noktalar duyduğum çok yaygın noktalar. Ben de bazı sayaç noktaları sunmak istiyorum. Guffa'nın yanlış olduğunu ve haklı olduğumu söylemiyorum. Sadece bir karşı değer sunuyorum.

1. Tasarım sürecinin yaratıcı kısmı, HTML ve CSS'de farklı şeylerin nasıl yapıldığını çözmeye çalışmak için zaman harcanması durumunda acı çekiyor.

Eğer biri kodu eşit olarak yaratıcı olarak görmüyorsa, bu geçerlidir. Photoshop ve HTML / CSS / JS, bir sanatçının çalışması için aracıdır. Bir boya, karakal kadar yaratıcı olduğu gibi, Photoshop da bir HTML / CSS / JS kadar bir ortamın yaratıcısı olabilir.

Ve doğrudan HTML / CSS / JS'de çalışmanın büyük yararı bunun çok boyutlu olmasıdır. Photoshop, günün sonunda düz bir tuvaldir. HTML / CSS / JS, akışkanlık, etkileşim, animasyon vb. İçeren dinamik bir tuvaldir.

Sonuç olarak, kodun bu durumda daha yaratıcı bir araç olduğunu iddia ediyorum .

2. Tasarımcılar ve kodlayıcılar farklı kişiler olduğunda, tasarımcılar HTML ve CSS'de oldukça iyi olsalar bile, kodlamada nadiren gerçekten iyidirler. Sonuç, şişirilmiş ve bakımı zor olan (değişken derecelerde) verimsiz kod olacaktır.

Buna ne yazık ki, ne yazık ki, sık sık karşılaştığım bir şey: Atanmış rollerde çalışan çoğu geliştirici daha büyük organizasyonda çalışıyor (adanmış rollerin daha fazla olduğu durumlarda) ve disiplinler arası bilgi eksikliği nedeniyle ( ve genellikle toplam bir sunum katmanı kodu eksikliği), en çok şişirilmiş olanların bazılarının şimdiye kadar gördüğüm ön uç kodlarını korumayı zorlaştırıyor.

Demek ki, birinin görsel tasarım yeteneklerini kodlama yeteneklerinin herhangi bir göstergesi olarak görmezdim. Bir adım öteye gideceğim ve tasarım ve kodlamayı bilen yetenekli bir generalin - en iyi tasarımcı ya da en iyi kodlayıcı olmasalar bile, çoğu zaman, aslında yüksek düzeyde ayrılmış ekipten daha iyi bir genel ürün yaratabileceğini savunuyorum. yarattıkça daha büyük resmi görebileceklerini söylediler. Çeviride çok daha az kayıp var.

3. Tasarımın neye benzemesi gerektiğine dair net bir görüşe sahip olmadan önce kodu yazmaya başlarsanız, kodun nasıl oluşturulacağı hakkında bilgisiz seçimler yaparsınız. Risk, kodu daha kötü hale getirmesi ve tasarım olanaklarını sınırlandırmasıdır.

Ancak kodda tasarlamak, üretim kodunuz olduğu anlamına gelmez. Oluşturduğumuz kodun çoğunun tamamen tasarım için yapıldığı ve ardından prototip ürettiği projeler üzerinde çalıştım. Bir kez bittikten sonra temiz bir yeniden yazdık. Bu, kodlamanın ilk aşamasında çok fazla “gotchas” bulabilmemizin yararını da ekledi.

4. HTML ve CSS kodu, tasarımdaki küçük değişikliklerle büyük ölçüde değişebilir ve bu da tasarım sürecini daha statik hale getirir. Kendinizi yalnızca kodda yapılması kolay değişikliklerle sınırlama riskiniz vardır.

Bunun karşıt argümanı tasarımcıyı yalnızca Photoshop'ta yapması kolay değişikliklerle sınırlandırıyor. Her iki şekilde de çok iyi bir tartışma değil.

İlk önce bir Photoshop maketi yapmamak için tek neden tasarımcının kodun sınırlarını anlamadığıdır. Müşteriye, finalde sahip olamayacağı şeylerin bir kompozisyonunu vermek istemezsiniz.

PSD, CSS / HTML'de (çapraz tarayıcı ve çapraz medya sınırlamaları verildiğinde) oldukça yakından çoğaltılabilen bir şeyi temsil ettiği sürece, Photoshop'ta (veya InDesign - bunu yapan birkaç tasarımcı biliyorum) yaparım. Görüntüleri değiştirmek daha hızlı ve kolaydır. CSS’de bana alay etmek, kodlamadan önce kodlama olurdu, eğer mantıklı.

Tasarım öğesini kod oluşturma öğesinden ayrı tutmanın birkaç nedeni vardır, örneğin:

• Tasarım sürecinin yaratıcı kısmı, HTML ve CSS'de farklı şeylerin nasıl yapıldığını çözmeye çalışmak için zaman harcanması durumunda acı çekiyor.

• Tasarımcılar ve kodlayıcılar farklı kişiler olduğunda, tasarımcılar HTML ve CSS'de oldukça iyi olsalar bile , kodlamada nadiren gerçekten iyidirler. Sonuç, şişirilmiş ve bakımı zor olan (değişken derecelerde) verimsiz kod olacaktır.

• Tasarımın neye benzemesi gerektiğine dair net bir görüşe sahip olmadan önce kodu yazmaya başlarsanız, kodun nasıl oluşturulacağı hakkında bilgisiz seçimler yaparsınız. Risk, kodu daha kötü hale getirmesi ve tasarım olanaklarını sınırlandırmasıdır.

• HTML ve CSS kodu, tasarımdaki küçük değişikliklerle büyük ölçüde değişebilir ve bu da tasarım sürecini daha statik hale getirir. Kendinizi yalnızca kodda yapılması kolay değişikliklerle sınırlama riskiniz vardır.