http://www.bildirgec.org/ tr-tr 40 bildirgec.org - etiketler: şeffaflık MisterMadDog <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/contrast-header.jpg' alt="\"\"" border="0"><br></div><br><em>Bu yazıyı okumadan önce usta bir tasarımcı olmanın <a href="http://www.bildirgec.org/yazi/usta-bir-tasarimci-olmanin-kurallari">birinci </a>ve <a href="http://www.bildirgec.org/yazi/usta-bir-tasarimci-olmanin-kurallari-1">ikinci </a>kuralını okumak isteyebilirsiniz.</em><br>Tasarımınızdaki kontrastın iyi olması, renk seçimlerinizle doğrudan orantılıdır. Kontrast, tasarımınızdaki renklerin değerlerindeki farklılıklardır. Değer ise bir rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Hiç beyaz bir çalışma alanı üzerine birinin şöyle bir espri yaptığını duydunuz mu: “Hey, bu kar fırtınasındaki beyaz bir inek!”? Bu, sıfır kontrasta örnektir. Beyaz üzerinde beyaz sıfır kontrasttır. Hiçbir şey göremezsiniz. <p>Çok basit değil mi? Yani demek istediğim ne kadar aptalca bir yazı bu? Tasarladığım şeyin görünebilir olması gerektiğini açıklıyorum? Bu bir ders için çok gerizekalı bir konu değil mi?</p> <p>Yanlış.</p> <p>Çünkü maalesef, sürekli tasarımcıların kontrastla ilgili problemler yaşadığını görüyorum. Bir tek o da değil, kontrast, uygun bir şekilde kullanıldığında önemli bir araçtır.</p> <p>Çok sık gördüğüm bir hata şu: Tasarımcılar kontrast yaratmak için değer değişikliği yerine renk değişikliği kullanıyorlar. Örneğin, orta değerde bir mavi, orta değerde bir kırmızının tam tepesinde durarak kontrast oluşturuyor. İkisi arasındaki farklılığı görebilirsiniz. Ama aynı değerden iki renk bir arada olduğu zaman (“vibrating”), mavi ve kırmızının buluştuğu çizgide, gözünüz ikisi arasında ileri geri gider, tereddütte kalır. Bu neredeyse yazının nabzı atıyormuş hissi verir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/contrast-vibration.jpg' alt="\"\"" border="0"><br></div> <p>Eğer amacınız gerçekten canlı bir şey yaratmaksa, bu tekniği kullanabilirsiniz. Ama gözlere fazla yüklenecektir ve bir çok insan bunu rahatsız edici bulacaktır. İşte aynı tasarımın daha fazla kontrast sahibi farklı renkler kullanılarak hazırlanmış hali:</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/contrast-non-vibration.jpg' alt="\"\"" border="0"><br></div> <p>Bu ikinci olan, açıkça gözlere daha az yükleniyor.<br>Tasarımınızın açık ve kolay okunur olup olmadığını anlamak için, her şeyi bir an için siyah beyaz yapabilirsiniz. Illustrator’da bunu tasarımı seçtikten sonra <em>“Edit>Edit Colors>Convert to Grayscale”</em> yönergesini izleyerek; Photoshop’ta ise tasarımınızı düzleştirdikten (flat) sonra, <em>“Image>Adjustments>Desaturate”</em> yönergesini izleyerek yapabilirsiniz.<br>Her iki şekilde de, bu testi yaptıktan sonra yaptığınız şeyi geri almanız gerekecek.<br>İşte aynı tasarımın, biri iyi kontrastla diğeri kötü kontrastla hazırlanmış hali. Ve her birinin altında ikisinin de siyah beyazda nasıl görüneceği var.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/josh-wink-contrast.jpg' alt="solda: iyi kontrast / sağda: kötü kontrast" border="0"><br>solda: iyi kontrast / sağda: kötü kontrast</div> <p>Soldaki tasarımdaki yazıları okumanın ne kadar kolay olduğunu görebilirsiniz, özellikle siyah beyaza döndürüldüğü zaman. Sağ taraftaki tasarım ise şekilleri belirlemek için daha az kontrast ve daha çok renk farklılığı kullanmış.<br>Her zaman aldığım bir soru da şu: “Bir arkaplan filigranı (watermark) için hangi saydamlık (opacity) seviyesini kullanmalıyım?”. Bence iyi bir filigran arkaplanı %10-%15 saydamlıkta olmalıdır. Bir kez daha –bunların hepsinin amacı, tasarımınızdaki kontrastın sürekliliğini sağlamaktır. Eğer arkaplan açık renkse –o zaman filigran, uygun bir açıklıkta ve tam tersi olmalıdır. Aşağıda iyi ve kötü filigran için örnekler var:</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/contrast-watermark-15.jpg' alt="arkaplandaki bu filigran %15 şeffaflığa ayarlandı. iyi kontrast!" border="0"><br>arkaplandaki bu filigran %15 şeffaflığa ayarlandı. iyi kontrast!</div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/contrast-watermark-50.jpg' alt="arkaplandaki bu filigran %50 şeffaflığa ayarlandı. kötü kontrast!" border="0"><br>arkaplandaki bu filigran %50 şeffaflığa ayarlandı. kötü kontrast!</div> <p>Kontrastla ilgili olarak belirtmek istediğim diğer bir şey ise bir araç olarak kullanılabileceğidir. Eğer, örneğin, izleyicinizin dikkatini tasarımınzdaki önemli bir şeye çekmek istiyorsanız, bunu kontrastla başarabilirsiniz! Tüm tasarımı açık renkte tutabilir ve dikkat çekmek istediğiniz şeyi karartabilirsiniz. Aşağıda bu şekilde iyi tasarlanmış bir tanıtım sayfası var:</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/contrast-eharmony.jpg' alt="\"\"" border="0"><br></div> <p>Bu, E-Harmony’nin web sitesindeki tur bölümünden bir sayfa. İnsanlara bir tur vermek isterlerken, gerçekten istedikleri insanların üye olmasını sağlamak. Yani, bu sayfaya baktığınızda, sayfadaki en büyük ve karanlık şey nedir? Bir kızın tıklanamayan resmi ve “Get Started Now/Hemen Başlayın” butonu. Açıkça, “Get Started Now/Hemen Başlayın” butonuna tıklamanızı istiyorlar. “Next Step/Sıradaki Adım” butonuna kıyasla, “Get Started Now/Hemen Başlayın” butonunun ne kadar büyük ve karanlık olduğuna bakın. “Next Step/Sıradaki Adım” butonu, turdaki birinin tura devam etmek için tıklaması gereken bir buton. Ama “Get Started Now/Hemen Başlayın” butonunun ne kadar çekici olduğunu fark ettiniz mi? Ve neden? Neden sayfadan üzerinize atlıyor? Basit: Kontrast!</p> <p>Bu, tasarımda basit ama temelde kritik bir dersin sonu oluyor. Bunu okuduğunuz için teşekkür ederim. Dört basit kural daha var. Bunlar bittikten sonra söz veriyorum size nasıl çizileceğini öğreteceğim!</p> <p><a href="http://www.gomediazine.com/author/wbeachy/">Bill</a></p> <p><a href="http://www.gomediazine.com/design-tip/rule-three-contrast-contrast-contrast/">Kaynak</a></p> <p><em>yazı tarafımdan çevrilmiştir, bana ait değildir.</em></p><p><strong>ilgili yazılar</strong><ul><li><a href="http://www.bildirgec.org/yazi/usta-bir-tasarimci-olmanin-kurallari">usta bir tasarımcı olmanın kuralları #1</a> (17)</li><li><a href="http://www.bildirgec.org/yazi/usta-bir-tasarimci-olmanin-kurallari-1">usta bir tasarımcı olmanın kuralları #2</a> (9)</li><li><a href="http://www.bildirgec.org/yazi/usta-bir-tasarimci-olmanin-kurallari-3">usta bir tasarımcı olmanın kuralları #4</a> (11)</li><li><a href="http://www.bildirgec.org/yazi/usta-bir-tasarimci-olmanin-kurallari-4">usta bir tasarımcı olmanın kuralları #5</a> (12)</li><li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-ve-gelistiricileri-icin-1">Web Tasarımcıları ve Geliştiricileri İçin 160 Rss Adres</a> (20)</li></ul></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/MisterMadDog">MisterMadDog</a> tarafından <a href=" http://www.bildirgec.org/yazi/usta-bir-tasarimci-olmanin-kurallari-2 ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Thu, 31 Jul 2008 06:05:00 GMT 73097@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/usta-bir-tasarimci-olmanin-kurallari-2 tasarım photoshop grafik grafik tasarım web tasarım how to nasıl yapılır kişisel gelişim illustrator öğütler kurallar kontrast şeffaflık usta tasarımcı tasarımın ilkeleri tasarım dersi grafik dersi aftermath <div class="imajorta"><a href="http://www.pilli.com/Analytics_www.bildirgec.org_20060316-20080316_(PageviewsReport).pdf"><img src='http://www.bildirgec.org/imaj/aftermath/bildirgec-analitik.jpg' alt="\"\"" border="0"></a><br>google analitik verileri</div> <p>dün <a href="http://www.pilli.com">pillinetwork</a>'ün kazanç paylaşımlı yeni altyapıya geçmesinin ikinci yılını kutladık. bu iki yıl sürecinde bildirgeç'te <strong>2586</strong> tekil gönüllü yazar <strong>24101</strong> yazı (bildiri + günlük + soru) yazıyı bizlerle paylaşırken <strong>3576</strong> tekil yorumcu yazılara yorumlarıyla katkıda bulundu.</p> <p>bildirgeç ilk gününden beri bu gönüllü kişilerin katkı ve paylaşımlarıyla büyüyen bir kolektif blog, biliyorsunuz. içeriği hep beraber üretip başarısına ortak olduk. beraberce üretilen bu başarının ziyaretçi istatistikleri de hepimizin ortak malı. bu fikirden hareket ile geçmiş iki yılın rakamlarını sizlerle paylaşmak istedik.</p> <strong>rakamlar:</strong> <ul> <li>sayfa gösterim rekorumuz 11 eylül 2007'de <strong>153,694</strong>.</li> <li>bildirgeç ile tanışmış toplam tekil insan sayısı: <strong>13,151,033</strong>. tekil insan sayısı <em>(Absolute Unique Visitors)</em>, siteye giren tekil bilgisayar sayısını temsil ediyor. bir kişinin birden fazla bilgisayar kullanabileceğini düşünürsek, türkiye nüfusunun kaba bir tahmin ile <strong>altıda biri</strong> bildirgeç ile minimum bir kez karşılaşmış demek oluyor.</li> <li>geçtiğimiz şubat ayında sunulan sayfa gösterimi <strong>2,769,059</strong>. ziyaret adedi ise <strong>1,361,621</strong>. </li> <li>2 yıl boyunca gerçekleştirilen toplam sayfa gösterimi <strong>43,274,476</strong>; ziyaret adedi ise <strong>21,365,064</strong>.</li> </ul> <strong>grafikte işaretli tepeler:</strong> <ul> <li><strong>a</strong>: 17 ağustos 2006: a. kırca video vakası</li> <li><strong>b</strong>: 4 ocak 2007: maskeli aylin ve youtube satışının yankıları</li> <li><strong>c</strong>: 14 mayıs 2007: öss sınav yeri açıklaması</li> <li><strong>d</strong>: 12 temmuz 2007: öss sınav sonuçları</li> <li><strong>e</strong>: 11 eylül 2007: öks başvuruları</li> </ul> <p><strong>yakın gelecekte ne olacak?</strong><br>şu an için rakamlarda katılımla beraber sağlıklı bir artış gözlenebiliyor. 2007 yılının son çeyreğinde yaşadığımız, grafiğe taraklanma olarak yansıyan, ziyaretçi sayısının artıp sayfa gösteriminin artamadığı donanım sıkıntısının etkisi tüm optimizasyon çabalarımıza rağmen halen görülebiliyor. önümüzdeki birkaç haftalık süreçte sunucu hafıza yetersizliğinden ötürü artışın bir miktar durması olası.</p> <strong>aldığımız teknik tedbirler</strong> <ul> <li>hafıza arttırımıyla ilgili bir <a href="http://www.pilli.com/yazi/bildirgec-org-ve-hafif-org">girişimimiz</a> oldu ancak donanım uyuşmazlığı nedeniyle başarısızlıkla sonuçlandı. bildirgeç ve hafif'in sunucularına uygun hafıza siparişi verildi ancak tedarik süreci 4-6 hafta civarında olacak.</li> <li>altyapıda pek çok <a href="http://www.pilli.com/yazi/son-gelismeler-ve-yardim-talebi">optimizasyon yapıldı</a>. bu sayede kaşe kullanan sayfalarda sunum kapasitesi saniyede 460 isteğe çıkartılırken dinamik sayfaların sunum hızı saniyede 1.8 isteğe çıktı.</li> <li>adına tombul dediğimiz dev bir veritabanı aldık ve geçtiğimiz haftalarda sisteme <a href="http://www.pilli.com/yazi/bu-gece-planlanmis-sunucu-calismasi">dahil ettik</a>.</li> </ul> <p><strong>paylaşım</strong><br>google analitik sistemi kullanılarak oluşturulan <a href="http://www.pilli.com/Analytics_www.bildirgec.org_20060316-20080316_(PageviewsReport).pdf">sayfa gösterim</a> ve <a href="http://www.pilli.com/Analytics_www.bildirgec.org_20060316-20080316_(VisitsReport).pdf">ziyaret</a> raporlarını pdf formatında bilgisayarınıza indirebilir; sitelerinizde dilediğiniz gibi dağıtabilir, kullanabilir ve analiz edebilirsiniz.</p> <p>oluşumun bir parçası olmayı tercih etmiş, katkıda bulunan ve bu canavarı beslemiş her bir kişiye topluluğumuz adına teşekkür ederim.</p> <p><!--buradan kes--></p> <p><strong>not:</strong> ziyaret; google analitik sözlüğüne göre, bir kişinin 30 dakika içerisinde sadece bir kere sayılmasıyla elde edilen rakam.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/aftermath">aftermath</a> tarafından <a href=" http://www.bildirgec.org/yazi/bildirgec-istatistikleri ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Mon, 17 Mar 2008 13:01:00 GMT 67185@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/bildirgec-istatistikleri bildirgeç istatistik google analitik rapor kolektif veri kolektif şeffaflık