Olağan ve olağanüstü arasında ayırt Detayları farkı bir dünya yaratmak.
Lüks bir araba, geleneksel bir araç olarak jantlar, koltuklar, pencereler ve kapılar aynı sayıda, ancak ayrıntılar üzerinde harcanan zaman, rekabet ayırır. Isıtmalı deri koltuklar, bir bas-başlangıç motoru, anahtarsız giriş, otomatik otopark ve geniş dijital konsolları pahalı, yeni bir araba için değer katmaktadır.
Aynı ilke, web tasarımı için de geçerlidir. Fark yaratan ayrıntılar dalmak için zaman ayırın Web tasarımcıları daha fazla değer tutan tasarımları ödülleri kapacaktır.
Burada anahtar kelime değerdir.
Bir web sitesi ve sonuç olduğunu değeri yaratmak için yatırım süresi arasında doğrudan bir ilişki hiçbir garantisi yoktur. Bazı ayrıntılar, diğerlerinden daha önemli olduğunu ve bu ayrıntıları bir etkisi olduğunu belirlemek için muktedir önemlidir.
Değer ekle Detayları
Biz ekstra zaman harcamak istiyorum ayrıntıları tip estetik düzeyin ötesinde işimizi geliştirir.
Şekilde kullanıcılar sitenin teması ve mesajı veya nasıl bir sitede gezinmek algıladığımız gibi, son derece kullanıcı deneyimini değiştirebilirsiniz görsel tweaks odaklanmak istiyorum.
Ortalama web sitesi ziyaretçi, kimin değil oluşturarak web siteleri konusunda deneyimli biri, kendi deneyimini geliştirmek nüansları işaret etmek mümkün, ancak bu detaylar kaldırılmış olsaydı, algı ve kullanılabilirlik bir fark ortaya çıkacaktır.
Bunlar bulunduğumuz zaman yatırım yapmak isteyen ayrıntıları
Peki tam olarak nasıl bir tasarım ayrıntılı bir web sitesi değer katacak?
İşin püf noktası, bir kullanıcı deneyimi. Web tasarımcıları, boşluk, kontrast, şekil, renk ve tüm farklı görsel unsurlar, insanların nasıl kullandıklarını bir rol oynayabilir ve bir web sitesi tasarımı nasıl algıladıkları negatif mükemmel bir anlayış olmalıdır.
Ne şaşırtıcı olabilir, çok daha büyük bir etkiye sahiptir bir fark yaratmak için başlamadan önce bir tasarımcı işlemek için gereken ne kadar birkaç piksel.
Bu farklılıkları nelerdir?
Yakından bakıyoruz
Ben% 500 veya daha yakın yakınlaştırılmış olduğumda ben Photoshop en rahat hissediyorum. Sadece ev gibi hissediyor. Ince detayları ile deneyimlerimiz yol gösterici iyi bir iş yapan bazı tasarım çalışmaları kazmak edelim.
Konsantre web sitesinde çalışan bir örnek olarak kullanacağız; ilk bizim konsantrasyon adamak için bizim için uygun bir yer gibi görünüyor.
Üst düzey bir bakış ile başlayarak, Konsantre sitesinde yapılan yaratıcı bir görsel kelime oyunları görebilirsiniz.
Portakal suyu konsantresi yapabilirsiniz ötesinde, biz, turuncu bir temalı renk paleti ve gerçek bir turuncu meyve dokusunu taklit oldukça iyi bir iş yapan bir arka plan bakın.
Biraz daha derine kazma, biz CSS3 metin için arka plan karşı kontrastı artırmak için bazı gölgeleme sağlamak için kullanılmış olduğunu görüyoruz.
Gerçekten takdir etmek, biz biraz daha derine kazmak gerekiyor.
Piksel Perfection
Gerçek detayları piksel düzeyinde uygulanır. Biz web sayfa düzeni en yakın eylem düğmeleri çağrı etrafında Konsantre sitesinde görüyoruz. İlk olarak, düğmeleri arkasında gölge sayfanın bu bölümüne kadar kaldırır. Alanının üst ve alt kısmında basit bir iki tek piksellik çizgiler, bu alanda daha fazla görsel sayfanın diğer öğeleri arasında ayrım veren basit bir tasarım hile.
Parlak turuncu, çünkü tek piksellik çizgiler daha belirgindir. Bu gölge ve arka plan arasındaki kontrast sağlar, ama gerçekten çok yardımcı olur, ikinci, koyu turuncu çizgi. Bu iki tek piksellik çizgiler bu üst bölümde kordon altına birlikte çalışır.
Fark
Aradaki fark, bu satırların artık web tasarımı bir parçası olduğunda en iyi olduğunu göstermiştir. Aşağıda, iki piksel yapmak ne kadar büyük bir fark olduğunu göstermek için bu satırları kaldırdık.
Zarif Gölgeler
Gölgeler web tasarımları yabancı. Çoğu web sitesi derinliği düz, 2-boyutlu bir ortamda simüle etmek için erken ve sık sık onları kullanmak. Gölgeler ve golleri sitemizde narin, ama güçlü, yollar deneyimli şekilde artırabilir.
Bizim tasarımlar CSS3 kabul yapabilirsiniz görkemli farklılıkları heyecan almak için çok kolay.
Olsa da, benim için gerçekten heyecan verici bir haber, detay çalışması, resim düzenleme yazılımı doğrudan kodu web sitelerinin ne kadar tercüme edilebilir.
Konsantre sitesinde kalmak, biz mükemmel bir örnek metin gölgeleri, bir sitenin içeriğini okumak için kolaylaştırmak için ince bir ve etkin bir şekilde nasıl kullanılabileceğini görüyoruz.
CSS3 text-shadow özelliği burada iki şekilde kullanılır. Önce kırmızı başlıkları aksi takdirde yaklaşık olarak iyi bir renk seçimi ile ilgili bir işe yaramayacağını gömülü / içerlek bir görünüm vermek için hafif bir gölge aldık. Oyunun ikinci gölge sadece beyaz renk sayfanın dışına bir asansör biraz vererek, paragraf metnin arkasında.
Fark
Yukarıdaki ekran, Internet Explorer 8 (text-shadow özelliği desteklemiyor olan) işlenen aynı sayfa ile karşılaştırın ve biz okumak çok zor bir site.
Bu site doğal olarak IE kullanıcıları ne görüyorsanız önemli ölçüde daha az endişe uyandırmaktadır Mac yazılımı, satış olduğunu işaret değerdir.
Navigasyon Nuance
Okunabilirliğini arttırmak ve olası sitesi eylemleri vurgulayan dışında, detaylar site navigasyon uzun bir yol.
Herhangi bir web sayfasının en önemli parçası, kullanıcı başka bir sayfaya gitmek için yeteneğidir. Sonuçta, bağlantılar, ilk etapta ne web ne, neden gezinilebilirlik üzerinde biraz daha fazla zaman harcamak değil?
Bu örnek için, biz Lipperhey sitesine odak kayması.
Navigasyon aktif devlet için iyi bir renk seçimi dışında, bu tasarım birincil gezinti çubuğu bazı ilginç detaylar eklediği bakın.
Home düğmesine renk değişikliği dışında birkaç nedeni ile dikkat çekiyor. İlk olarak, sadece aşağı gezinti çubuğu bir kaç piksel damla olduğunu görebilirsiniz. Buna ek olarak, bir gölge düğmesinin arkasındaki eklenmiş ve perspektif içinde hafif bir ayar verilir. Bu iki ayrıntı önemini ve aktif durumu gösteren bu bağlantıyı katma boyut algısı birlikte vermek.
Fark
, Söz konusu ayrıntı vermeden aynı gezinti gözden geçirilmesi çok heyecan gitmiş olduğunu bulmak ve bizim aktif link tamamen farklı bir görünüm vardır ve hissediyorum.
Ayrıntılar İlerlemek
Biz CSS3 bizim yeni yetenekler bazı tasarımlar (text-shadow) değer katmak yardımcı olabilir yollarından biri araştırdı.
Fakat CSS3 güç gölgeler ile bitmiyor. CSS3 animasyon, dönüşüm ve geçiş özellikleri gibi şeyler, bize ayrıntılı çalışma için ek bir araç verebilir.
Doğru kullanıldığında, CSS3 animasyonlar koşum verimli Flash ya da JavaScript yardımı gerek kalmadan site öğeleri hareket eklemek için büyük bir yetenek. Ayrıntılar açısından, animasyonlar, giriş her türlü sıvı geri bildirimi ile kullanıcılara sunmak için izin verir. Bir geçiş animasyon ekleme, vurgulu devletler veya düğmesini tıklattığında bağlamak için, örneğin, (ya da dokunmatik ekranlı mobil cihazların durumda, dokunma), onlar üzerinde çırpınırken bir aktif element kullanıcı söyleyebilirim.
Site detayları ile çalışma güzellik ilerici geliştirilmesi yoluyla, biz hala modası geçmiş tarayıcıları kullanmayı tercih edenler yabancılaştırıcı olmayan, hedef kitlemizin bir bölümü değer sağlamak,.
Burada anahtar, zaten sağlam bir web tasarım değer katmak için tüm bu tekniklerin kullanımı. Temelde sağlam bir tasarıma kesinlikle önce at arabası yerleştirerek bu tekniklerin herhangi Leaning.
Başka nerede ayrıntılı değerini artırmak için bir siteye eklenebilir? Geçmiş projeler ile başarı detay tekniklerinin neler oldu?