web-gelistirme-sc.com

PSD maketleri ile HTML maketlerinin artıları / eksileri

Son zamanlarda her zamanki PSD maketlerinin aksine HTML maketlerine gözlerimi açan bazı makaleler ( b ve bu) ) okudum.

Makalede bazı artıları belirtiyorlar:

  • Değişiklikler çok daha hızlıdır (renklerde ve bir ölçüde yazı tiplerinde değişiklikler dahil).
  • Sayfayı HTML olarak düzenlerken, müşteriye nihai ürünün neye benzeyeceğine çok daha yakın bir şey gösteriyorsunuz.
  • Pencerenin boyutunu değiştirerek sıvı düzeninin etkilerini görebilirler.

Eksileri:

  • Tüm görsel tasarımcılar HTML'de bir model oluşturamaz. İki kişilik bir görev olması gerekecek. Bir HTML kişisi ve bir Photoshop kişisi.

Her iki yaklaşım için de artıları/eksileri olarak ne görüyorsunuz?

24
milesmeow

Bir web sitesi veya uygulama oluşturuyorsanız, mockup'u nihai ürüne olabildiğince yakın biçimde tasarladığınızdan HTML maketleri çok daha üstündür. Bu, beklentileri çok daha kolay bir şekilde belirlemenizi sağlar, sizi nihai üründe neyin mümkün olduğuna kısıtlar ve çok daha fazla esneklik sağlar.

Bu kural giderek "tarayıcıda tasarım" olarak biliniyor. Tarayıcıda tasarım, şelale yöntemini doğası gereği atlar. Photoshop maketleri görsel tasarımcı ve etkileşim/UX tasarımcısı arasında bir engel oluşturur: Photoshop'ta çalışan kişi, nihai ürünü ve tarayıcının beraberindeki kısıtlamaları dikkate almadan tamamen görsel sadakat açısından düşünerek uzakta bulunabilir. Photoshop mockup hazır olduğunda, bir sonraki aşamaya geçmek için UX ekibine "atılır". Bu yinelemeli, geri besleme odaklı bir süreci desteklemez.

Birkaç ay önce prototipleme aracımızı oluştururken kullandığımız bu felsefe hakkında bir blog yazısı yazdım. Burada yararlı olabileceğim bazı makaleler (bağlandığınız Megan Fisher tarafından yazılmış olanlar dahil):

Diğer tasarımcılar ve geliştiriciler onunla aynı fikirde:

  • 37 işaretler ' Neden Photoshop'u atlıyoruz süreçlerini açıklıyor: Photoshop maketleri etkileşimli değil; uygulamanın akışı hakkında bir his vermiyorlar; ayrıntılara çok erken odaklanmanızı teşvik ediyorlar.
  • Meagan Fisher’ın 24ways.org makalesi Biçimlendirmede Mockup'unuzu Yapın Clarke’ın ilkeleri hakkında daha fazla konuşuyor ve HTML yapısıyla başlamanın tasarımcıların birden çok sayfa mizanpajı üzerinde nasıl hızlı bir şekilde yinelemelerine izin verdiğini açıklıyor.
  • Bunlar tarayıcıda tasarım için 12 ipuc Design Shack'ta da bazı iyi bilgiler sunuyor.
18
Rahul

Bu bir sadakat meselesi.

Yakalama, odaklandığınız şeye bağlı olarak her iki belgenin diğerinden daha yüksek kalitede olabileceğidir.

Bir HTML prototipi, orta düzeyde karmaşıklığa sahip herhangi bir etkileşimi gerçekten alay etmenin tek yoludur. PSD dosyasındaki etkileşim tasarımını tam olarak belgelemenin bir yolu yoktur.

Tersine, görsel tasarımın sürekli olarak değiştirildiği/geliştirildiği/yinelendiği bir ortamdaysanız, PSD görsel tasarım öğelerini işlemek için daha iyi bir 'kayıt belgesi' olabilir.

Sonunda, PSD'ye karşı HTML'ye geldiğini düşünmüyorum. Bir proje ve ekip üyesi bazında ihtiyaçlarınızın özelliklerine bağlı olarak her ikisine de farklı miktarlarda ihtiyacınız vardır.

13
DA01

HTML maketlerini kullanmanın olası bir dezavantajı, istemcinin ne olduğunu söylemiş olsanız bile uygulamayı bitirdiğinizi düşünebilmesidir.

Cidden, hem müşteri hem de yönetici olarak, gerçek ürünü oluşturmak için normalde kullandığınız araçları kullanarak bir mockup gördüğünüzde, işin çoğunu yaptığınızı ve başka bir şey alacağını söylediğinde şaşırdığını düşündüğüm insanları tanıyorum 6 çalışmayı haftalarca (ya da uzun bir süre).

Örneklerin bir adım kaldırılması bu yanlış anlaşılmayı gidermeye yardımcı olabilir.

Bununla birlikte, dinamik bir modelin size ve istemciye sistemin nasıl çalıştığını ve uygulamada nasıl gezindiğinizi daha iyi anlayabileceğinizi söyledikten sonra.

7
ChrisF

Etkileşimli örnekler hazırlamak görsel tasarımcı 'ın işi değil, I/UX tasarımcısı. Doğru - genellikle bütçe nedenlerinden dolayı bir ve aynıdırlar, ancak işleri çok farklıdır.

Sorunuz aslında Statik ve Dinamik maketleri olarak yeniden ifade edilebilir.

Bence dinamik örnekler neredeyse her zaman statik olanlardan daha üstündür:

Bence asıl neden, doğru kullanılabilirlik testi için kullanılabilmeleridir - bir şey yaptığınızı hayal etmek, aslında bunu yapmaktan, zaman harcamaktan, tıklama miktarından, hareketten, vb. sistemdeki gerçek akış hissi.

Bununla birlikte, hiçbir şey bedelsiz değildir - dinamik bir mockup oluşturmak genellikle çok daha fazla zaman gerektirir. Dahası, müşteri ile daha yüksek beklentiler yaratır - bir düğmeye basarsanız ve sistemde bir şey yaparsa, tüm düğmelerin aynı şekilde çalışmasını beklersiniz (ve bazıları ana senaryo ile daha az alakalı olabilir).

Statik bir mockup ile müşterilere ve geliştiriciler kullanım durumları boyunca rehberlik etmek daha kolay olabilir - ekranları tek tek "doğru" sırayla göstererek tüm kullanım durumlarının karşılandığından emin olun. istediğiniz gibi. Dinamik olanı kullanırken, kullanıcılara "çok fazla" özgürlük verebilir, bu da anahtar kullanım durumlarını, vb.

BTW - html maketleri oluşturmak için programcı olmanıza gerek yoktur. Bu tür maketlerin programcı olmayanlar tarafından oluşturulmasına izin veren birçok araç (örneğin Axure, Balsamic, Flair Builder ve diğerleri) vardır.

5
Dan Barak

Duyarlı tasarımın artan popülaritesi ile dinamik bir model (tahmin edilebilir HTML) kullanmak bile daha fazla mantıklıdır. İlk kaba düzeni tasarlarken, yerleşimin birçok genişlikte nasıl çalıştığını görmek için kendimi sürekli olarak yeniden boyutlandırıyorum.

Statik bir görüntü ile duyarlı bir tasarım belirtmek mümkün değildir ve birden fazla statik görüntü ile ifade etmek zaman alıcı ve aşırı derecede karmaşıktır.

2
obelia

Anekdot Cevap

Kısa bir süre önce ana şablonun Photoshop'ta tasarlandığı bir sitede çalıştım ("PS" olarak anacağım), ancak sitenin ayrı bölümlerinin hala tasarlanması gerekiyordu. Bazı standart olmayan UI gereksinimleri ile birkaç bölüm üzerinde çalışıyordum ve bunları Photoshop'ta alay edip etmeyeceğime mi yoksa sadece HTML/CSS ile mi yapacağım konusunda karar vermeliydim. Ben ikincisini seçtim ve ÇOK minnettarım.

Aslında sayfa içeriğini ve gezinme öğelerini HTML'de işaretleyerek başladım. Bunu aldıktan sonra, CSS ile oynamaya ve neyin işe yaradığını görmeye başladım. Çok hızlı bir şekilde tamamen farklı birkaç düzen oluşturabilir ve bunları hemen bir tarayıcıda test edebilirim. Neredeyse anında işe yaramayacağını bildiğim birkaç seçenek vardı ve bunları hızla bırakabildim (normalde PS'deki tasarımı bitirirdim). Photoshop'ta mümkün olmayacak etkileşimli (show/hide/etc) öğeler de ekleyebildim.

HTML vs PS, örneğin tablolarda yol daha hızlı giden bazı şeyler var. Hücreler ve başlıklar içinde değişken metin içeriğine sahip PS'deki tabloları görsel olarak tasarlamak biraz çaba gerektirir. HTML'de süper hızlı ve aslında nasıl görüneceğini gerçekten görüyorsunuz.

Tabii ki bu sizi şimdiye kadar götürüyor çünkü CSS ile her şeyi yapamazsınız. Bazen Photoshop'a geri dönüp belirli bir parça için böyle ve böyle bir görüntü yaratırdım, ancak çoğunlukla sadece CSS ile ne kadar yapabileceğimi görünce şaşırdım.

Benim almam

Bunu hâlâ vaka bazında ele alacağım. Ancak gelecekte kesinlikle HTML maketlerine yaslanacağım.

2
jessegavin

Eğer haklıysam, inanıyorum VB başlangıçta hızlı bir şekilde bazı mockups vurmak için bir yol olarak yazılmıştır ... Bunu göz önünde bulundurarak, "doğru" cevap muhtemelen olduğunu söyleyebilirim HTML maketlerinin yolunda ilerlemek için.

Ancak, yazarken yeni bir ürün için maket oluşturma sürecindeyim ve açıkçası, PSD biçiminde olduğu kadar iyi görünen html maketlerini oluşturma çabalarının faydalı olduğuna inanmıyorum. Karmaşık düzen tasarımı ile biraz metin, resim veya vb. Tam olarak istediğiniz yerde görünmesi, bir web geliştiricisinin benzer beceri düzeylerine sahip bir photoshop sanatçısından daha uzun sürmesini sağlayacaktır.

Ayrıca, metin ve temel tasarımlardan daha fazlasını yapacaksanız, muhtemelen bu tasarım işini yapmak için Photoshop'u (veya benzer grafik paketlerini) kullanacaksınız - konuyu neden karmaşıklaştırıyorsunuz?

Eğer interaktif maketler kullanmak için gerçek bir gerekçe varsa (örneğin, belirli bir interaktif ekranın nasıl çalışacağını göstermek için büyük bir kullanıcı grubu), o zaman ekstra çaba buna değer.

Ancak, bir müşteriye bir uygulamanın birkaç penceresinin nasıl görünmesi gerektiğini düşündüğünüzü gösteriyorsanız, ekstra çaba için gerekçe olduğunu düşünmüyorum?

1
Sk93