bildirgec.org - qrHsn - beğendikleri

photoshop'ta doğru web renkleri almak

qrHsn — Wed, 11 Feb 2009 14:48:00 GMT

Daha önce hiç Photoshop üzerinde bir web sitesi tasarlayıp ardından iş görselleri kesme aşamasına geldiğinde kaydedilen görseldeki renklerin Photoshop üzerinde görünen renklerden farklı olduğunu gördüğünüz oldu mu? Üstelik HEX değerleri aynıyken bile görünen renkler tamamıyla farklı.

Hemen panik yapıp Photoshop'u suçlamaya kalkmayın. Eğer değiştirmeniz gereken ayarların hangisi olduğunu biliyorsanız, bu sorunu düzeltmesi oldukça kolay.

Renklerin Farklılıkları

Photoshop'ta View menüsü altında çalışmak istediğiniz renk profilini belirleyebileceğiniz bir ayar bulunmaktadır. CMYK gibi bazı renk profilleri baskı sırasında daha doğru sonuçlar verirken RGB gibi renk profilleri web üzerinde daha doğru sonuç verir. Öntanımlı olarak Photoshop web renk profilleri ile çalışacak şekilde ayarlanmamıştır.

Proof Color Ayarı

Öncelikle View menüsünü açın ve Proof Colors özelliğini etkinleştirin.

Ardından yine View menüsü altından Proof Setup bölümüne gelin ve renk profilini "Monitor RGB" olarak değiştirin.

Şimdi Photoshop belgesinde gördüğünüz renkler ilgili belgeyi kaydettiğinizde değişmemesi gerekir. Yukarıdaki değişiklikleri yapmadan önce Photoshop'ta görünen ile kaydedilen görselde görünen renklerin farklarına bir bakın.

Sonuç

İşte bu kadar. Proof Colors özelliğinin öntanımlı değerini değiştirebileceğim bir ayar bulamadım, bu yüzden Photoshop üzerinde çalışmaya her başladığınız zaman bu ayarları değiştirmeniz gerektiğini unutmayın. Eğer bu öntanımlı değeri nasıl değiştirebileceğinizi biliyorsanız yorumlarınızda paylaşmayı unutmayın.

Kaynak: Build !nternet

Photoshop İle İlgili Yazdığım Diğer Yazılar

Hiçbir Zaman Ölmeyecek 28 Photoshop Dersi

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

sosyal ağların twitter'ı kullanabilmelerinin 11 yolu

qrHsn — Thu, 12 Feb 2009 14:54:00 GMT

Tüm yeni sosyal ağlar yürürlüğe girdiğinde yoğun bir pazarlamaya ihtiyaç duyarlar. Günümüzün pazarlaması tümüyle sözleşmeler ve ardından kullanıcının önüne ilgi çekici bir şeyler sunabilmekle ilgilidir. Genellikle göz önündeki sosyal ağların pek çoğu Facebook, MySpace ve YouTube gibi gelişmiş sosyal ağların sırtında bir kene gibi hayatlarını sürdürürler.

Geçtiğimiz bir ya da iki yıl içerisinde Facebook, önemli bir pazarlama aracı haline geldi. İlk önce bir Facebook grupları, ardından popüler olmayan uygulamalar ve son olarak Facebook Connect. Ancak Facebook'un geçtiğimiz yılki %110'luk büyümesine karşın Twitter'ın %1191'lik büyümesi, önümüzdeki dönemde izlenmesi gerekenin Twitter olması gerektiğini kanıtlar nitelikte.

Twitter Kendi Ağınızı Tanıtıyor
Yazının devamında Twitter'i kendi sosyal ağınıza Twitter APIsini kullanarak nasıl entegre edebileceğinize yönelik birkaç ipucunu bulacaksınız.

1) Multimedya Twitter: Kullanıcı bir multimedya öğesini gönderdiğinde onlara ilgili dosyanın URLsini Twitter'a gönderebilecekleri bir seçenek sunun. Buna güzel bir örnek olarak SlideShare gösterilebilir. İlgili servis, gönderilen PowerPoint sunumlarınızı Twitter'a gönderebilmenizi sağlıyor.

2) Ağınız Üzerinden Tweetleyin: Kullanınıcılarınıza Twitter durum bilgilerini kendi sosyal ağınız üzerinden güncelleyebilmelerini sağlayın. Bu sayede kullanıcılarınız ne zaman Tweetlese, siteniz kaynak olarak gösterilecektir.

3) Üyelerin Fotoğrafları İçin TwitPic: TwitPic Twitter üzerinden fotoğraf paylaşımını sağlayan bir servis. Kullanıcılarınızın sitenize gönderdikleri görselleri aynı zamanda TwitPic üzerine de gönderebilmelerini sağlayabilirsiniz. Bu sayede sosyal ağınızdaki kullanıcıyı Twitter üzerinden takip eden diğer kullanıcılar, ilgili kullanıcının siteniz üzerindeki profiline ulaşacaklar ve sitenizdeki ziyaretçi trafiğinin artmasına sebep olacaklardır.

4) Twitter Hesap Bilgilerini Kullanarak Üye Olma / Sitenize Giriş Yapabilme: Dilerseniz kullanıcıların sitenize Twitter Giriş Yetkilendirmesini kullanarak üye olabilmelerini ya da sitenize giriş yapabilmelerini sağlayabilirsiniz. Bu sayede kullanıcılarınız sitenize en sevdikleri sosyal ağ üzerinde kullandıkları hesap bilgileri üzerinden kolayca giriş yapabilecekler. Buna rağmen bu yöntemin bazı dezavantajları şimdilik yok değil ve OAuth'un Twitter için yürürlüğe girmesinin ardından bu sorunun çözüleceğini umuyorum.

Kullanıcıların Oluşturduğu İçeriğin Tweetlenmesi
İnsanları sitenizi kullanmaya teşvik edebileceğiniz bir diğer yöntem de sizi takip eden Twitter kullanıcılarını, sitenizi kullanan diğer kullanıcıların oluşturdukları içerik hakkında bilgilendirmektir. Bu konuda şunları önerebiliriz:

5) Yeni Özellikler Hakkında Bloglayın ve Tweetleyin: Sitenizdeki her yeni özelliğin bloglanması ve ilgili bloga olan bağlantının Tweetlenmesi, haberin yayılması açısından büyük önem taşımaktadır. Genel olarak tüm blogların Tweetlenmesini alışkanlık haline getirmelisiniz.
6) Günün Etkinliğini Tweetlemek: Geçtiğimiz günün önemli olaylarını Tweetlemek de sosyal ağınızın tanıtımı için faydalı olabilir. Örneğin geçtiğimiz gün gönderilen mesajların toplam sayısı gibi.

7) Yarışmayı Kazananlar: Site üzerinde etkinlikler düzenlemek kullanıcı etkileşimi açısından önemlidir. Örneğin düzenlediğiniz yarışmaları kazanan kişi belirlendiğinde onun profiline bağlantı gönderebilirsiniz.

Tweetlemenizi Gereken Sosyal Ağ İçeriği
Twitter'ı ve kullanıcıların oluşturdukları içeriği sitenize eklemenin dışında site sahibi kendi ağının tanıtımını aşağıdaki şekillerde de yapabilir.

8) Etiketler Kullanın: Etiketler içeriğin twitter dünyasında kolayca bulunabilmesini sağlarlar. Kullanıcılarınızı özellikle site ile ilgili etkinlikler hakkında yazı yazacakları zaman etkinliğin başına # işaretini eklemeleri konusunda teşvik edin: #SiteAdi ya da #SiteAdi-EtkinlikAdi gibi

9) Tweetlerinizi Kısa Tutun: Twitter platformu gönderilen Tweet başına 140 karakter limit koyar. Gönderdiğiniz Tweetleri genel olarak 110 karakterin altında tutmayı başarırsanız diğer kullanıcıların Tweetinizi yeniden Tweetleyebilmelerinin önünü açmış olursunuz.

10) İlgi çekici haberleri yeniden Tweetleyin: Eğer diğer kullanıcıların gönderdiği Tweetleri, hedef kitleniz için ilgi çekici buluyorsanız, onları yeniden Tweetlemeye özen gösterin. Bu sayade sizinle aynı ilgi alanlarını paylaşan kullanıcıları sitenize çekmiş olursunuz. Aynı zamanda sitenizle ilgili olmayan Tweetlerden uzak durun zira bu tip girişimler hem düzenlediğiniz etkinlikleri ve planlarınızı olumsuz yönde etkiler, hem de kullanıcıların sizi izlemekten vazgeçmesi ile sonuçlanır.

11) İyiliği İade Edin, Sizi Takip Eden Kullanıcıları Takip Edin: Eğer bir kullanıcı sizi Twitter üzerinde takip etmeye başlarsa, siz de onu takip etmeye başlayın. Her ne kadar bu biraz tarışmaya açık bir onu olsa da kullanıcılarınız bu sayede size Doğrudan Mesaj gönderebileceklerdir.

Kaynak: Kwiqq Blog
Yazar: @rajanand

Twitter İle İlgili Yazdığım Diğer Yazılar

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

En iyi 10 (ücretsiz) wordpress tema sitesi

qrHsn — Thu, 12 Feb 2009 17:12:00 GMT

themespack.com un seçtiği en iyi 10 wordpress tema sitesini sizlerle paylaşmak istiyorum. Aslında harika tasarımlı ücretsiz wordpress temalarından derlediğim bir bildiri yazacaktım. Araştırırken aralarında seçim yapmakta zorlandım ve en iyi ücretsiz wordpress tema sitelerini yazmaya karar verdim. umarım tüm wordpress kullanan arkadaşların işine yarar. Seçimi themespack yaptığı için ilk sıraya kendisini yerleştirmiş.
ThemesPack

ThemesPack

wpThemesFree

wptheme

wpTheme

Free Wordpress Themes

Fresheezy

wpsnap

weblog tools connection

themes-wp

Kate’s Theme Viewer

kate's theme viewer

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

2008'in onlarsız yapamayacağınız 23 unutulmaz kaynağı

qrHsn — Tue, 10 Feb 2009 07:43:00 GMT

2008, benim gibi blogcular için mükemmel bir yıldı. Bu yıl ise her gün bir farklı blog üzerinde daha kaliteli içerik yayımlamak için oldukça büyük bir rekabet var. Bunun amacı geçtiğimiz yıl farklı bloglar üzerinde büyük ilgi çeken blogların yayımlanmış oluşu. Bugünkü makalemizde ise 2008 yılında en çok ses getiren blogların bir kısmını derlemeye çalışacağız. Kaynaklar arasında ilham kaynakları, ücretsiz içerikler, araçlar, rehberler ve benzeri kaynaklar yer alıyor. Bu kolleksiyon özellikle tasarımcılara yönelik olarak hazırlanmış olsa da "sadece" tasarımcılara yönelik değil. Bu sebeple ilgili kaynaklardan herkesin sebepleneceğini umuyorum.

Eğer sizin de 2008 yılında okumaktan büyük zevk aldığınız kaynaklar var ise yorumlarınızda paylaşmaktan çekinmeyin.

2008'in En Popüler 100 Photoshop Dersi

2008'de Oluşturlan En Güzel 50 Simge Seti

2008'in En Güzel Web Tasarımları

2008'in Blog Trendleri

İlham alabilmeniz için 2008'de yeniden tasarlanan 10 Logo

En İyi Web Tasarımcıları İle 2008'e Bir Bakış

2008'in En İyi Illustrator Dersleri ve Makaleleri

2008'den 60 Mükemmel Abduzeedo Makalesi

2008'de Kaçırmamış Olmanız Gereken 5 İlham Veren Web Tasarım Konferans Konuşması

2008 Tasarım Trendleri

2008'in En İyi 30 Photoshop Metin Efekti Dersi

2008'in Ürünleri

2008'in En İyi ve En Kötüleri

23 Kategoride 2008'in 50 Mükemmel Tasarım Makalesi + Kullanıcıların Gönderdiği 40 Makale

2008'in En İyi 75 Tasarım Kaynağı

2008'in En Güzel Web Siteleri

2008'in En İyi Kurumsal Kart Tasarımları

2008'den 25 Fantastik Tasarım Makalesi

2008'in Öne Çıkanları

2008'in En Popüler Tasarım Makaleleri, Rehberleri ve Kaynakları

2008'in En İyi 100 Web Tasarımı

2008'in En İyi iPhone Uygulamaları

2008'in En İyi Görünümlü Blog Tasarımları

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

50 adet Adobe Illustrator Video Anlatımı

qrHsn — Mon, 09 Feb 2009 10:01:00 GMT

Adobe Illustrator iş vektör tabanlı grafikler hazırlamaya geldiğinde sektör standartlarını belirleyen bir yazılım. Çok güçlü araçları olan bir yazılım olmasından dolayı öğrenilmesi de bir o kadar zaman alıyor ve kişileri oldukça zorluyor. Neyse ki öğrenme aşamasını kısaltan, adım adım neler yapmamızı anlatacak şekilde hazırlanmış pek çok video mevcut.

Bu bildiride sizlere 50 adet Illustrator Video Tutorial'ını sunmak istiyorum. Bu videolarda neler yapmanız gerektiği adım adım gösterilerek anlatıldığından sanki bir sınıf ortamındaymışsınız gibi çabuk bir şekilde kavrayabiliyorsunuz.

Şimdi Adobe Illustrator'unuzu açın ve buradaki birkaç videoyu izlemeye başlayın. Kısa bir süre sonra neler yaptığınıza siz bile şaşıracaksınız.

GENEL İPUÇLARI VE TEKNİKLER
Katmanlar ve şekiller

Masking Hakkında Herşey

Katmanlar ve Gruplarla Çalışmak

Nesneler Oluşturmak
Ipod Oluşturmak

3 Boyutlu Şekiller Oluşturmak

3 boyutlu Piramit Oluşturmak

Efektler
Gradient kullanarak odun efekti

Parlayan heyecan verici kalp efekti

Listenin tamamına ulaşmak için tıklayın.

Kaynak:Smashing Magazine

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

css ile message box örneği

qrHsn — Sun, 08 Feb 2009 15:49:00 GMT

css message box

Css ile (message box) mesaj kutularını bilmeyen yoktur , bu örnekte mesaj kutularını biçimlendirmeyi öğreneceksiniz.
kodlar hakkında kısa bir bilgi;

Clean message box (mesaj kutusunu temizlemek için bir tuş oluşturalım )

...bir DIV layer içerisinde bir kaç text kodu ile birlikte aşağıdaki gibi CSS kodları kullanılır:

.clean-gray{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}

Mesaj kutularımızı oluşturduktan sonra onları iconlaştırabiliriz, nasıl mı? Öncelikle küçük iconlara ihtiyacımız var, icon packleri buradan indirebilirsiniz. Bu küçük hoş iconlar mesaj kutularımızın sol köşelerine yerleştirilecek.

css message box icons

css dosyamızda iconları yerleştirmek için kullanacağımız kodlar:

mesaj iconları

.icon-heart{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}

yukarıdaki gibi olacaktır... Backround için şeffaf renkler seçebilirsiniz. bir kaç css hilesi ile cursor mesaj kutunuzun üzerine geldiğinde iconların değişerek ortaya hoş bir tasarımın çıktığını göreceksiniz. Yazıyı sizler için türkçeleştirerek sunmaya çalıştım, detaylar için örneğin kaynağına bakabilrisiniz. Örnek kodlarını buradan indirebilirsiniz.

42 css hilesi ve örnekleri

Benzer 42 Css Hilesi ve Örnekleri için buraya göz atmanızı tavsiye ederim.

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

jQuery Kullanarak Satıriçi Metinlerin Rengini Değiştirmek

qrHsn — Sun, 11 Jan 2009 16:27:00 GMT

Sadece birkaç satır jQuery kullanarak istediğiniz bir metnin üzerine fare imlecini getirdiğinizde onun rengini değiştirmek çok kolay bir işlem. Nasıl mı? Yazının devamını okuyun.

Demo | İndir

Prensip
Bu betiğin yaptığı şey, bağlantıları (A Etiketikleri) seçmek, içeriğini ".one" adındaki bir sınıfa dahil olan SPAN'a dahil etmek ve ".two" adında bir SPAN elementi oluşturmak. SPAN "iki" A etiketi ile aynı içeriği taşıyor ve bağlantı metninin hemen üzerine konumlandırılmış.

Başlangıçta ikinci SPAN gizli. A elementinin üzerine fare imleci getirildiğinde, "two" SPAN elementi jQuery'nin fadeTo

Her zaman olduğu gibi IE yine problem çıkarıyor ve bu sebeple bunu çözecek bir yöntem uygulamak zorunda kaldık. Çünkü bir metin IE üzerinde yavaşça belirginleşirken IE o metnin görünümünü çirkinleştiriyor, bu sebeple de ilgili elemente bir arkaplan rengi uygulamamız gerekiyor.

Betiği sitenize nasıl ekleyeceksiniz?

Adım 1 - JavaScript

Yukarıda verdiğim bağlantı üzerinden betiğimi ve jQuery kütüphanesini içerek betiği indirin ve sitenizde bir yere yarlaştırın. Ben genellikle tüm JavaScript dosyalarını ana dizindeki "/js" klasörü içerisine yerleştiririm. Ardından aşağıdaki kodu kullanarak jquery kütüphanesini ve renk geçiş betiğini içeren js dosyasını ekleyin.

<script type="text/javascript" src='http://www.bildirgec.org/js/jquery.js'></script>
<script type="text/javascript" src='http://www.bildirgec.org/js/fadeLinks.js'></script>

Adım 2 - CSS
Aşağıdaki satırları CSS dosyanızın içerisine ekleyin. Bu bir demo olduğu için ben etiket seçicilerini kullandım. A için kullandığım stil öntanımlı olarak kullanılırken, SPAN için kullandığım stil fare imleci metnin üzerine getirildiğinde beliriyor.

a{
    color:#f30;
    font-weight:bold;
    text-decoration:none;
    }
a span.two{
    color:#069;
    cursor:pointer;
    }

Adım 3 - Özelleştirmeler
CSS seçicilerinizin düzgün yazıldığına emin olun ki bu betiği seçici olarak ekleyebilirsiniz. Yoksa bu stil belgenizdeki tüm A etiketlerine uygulanır. Seçicileri özelleştirmek CSS üzerinden ve betik üzerinden de yapılmalı. Örneğin eğer bu efekti id="content" kullanan bir div'e uygulamak istediğinizi varsayarak, kullanmanız gereken kod aşağıdaki gibi olmalı.

#content a{
    color:#f30;
    font-weight:bold;
    text-decoration:none;
    }
#content a span.two{
    color:#069;
    cursor:pointer;
    }

fadeLinks.js dosyanızda da selector adındaki değişken de şu şekilde görüntülenmeli.

var selector = "#content a";

Eğer geçiş efektinin hızı yavaşsa o zaman "speed" değişkeninin değerini değiştirebilirsiniz. Yavaş için "hızlı", normal için "normal", hızlı için "fast" değerini kullanın.

Betik, Windows'ta FF, IE7 ve Opera üzerinde, Mac'te FF ve Safari üzerinde denendi.

Demo | İndir

Kaynak: CSS Globe

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

jQuery'nin En Pratik Ve Yaratıcı 20 Kullanımı

qrHsn — Tue, 20 Jan 2009 14:25:00 GMT

Mükemmel jQuery eklentilerine ve onları nerede bulabileceğine dair sayısız makale bulunuyor. Ancak bazen bu üçüncü parti kaynaklara ve eklentilere bel bağlamamak en iyisidir. Tıpkı eskiden olduğu gibi kendiniz yapın. Bugün, günümüz modern web siteleri ve uygulamalarında kullanılan 20'nin üzerinde yaratıcı ve pratik jQuery kullanım örneklerini listelemeye çalışacağız. Eminim bu örnekler size bir sonraki projeniz için ilham verecektir.

James Padolsey Renk Değiştiricisi

Nettuts yazarlarından James Padolsey'in web sitesinde güzel bir özellik bulunuyor. Sitenin sağ üst kısmında bulunan "özelleştir" çubuğu başlık kısmının arkaplan rengini değiştirmenizin sağlıyor.

Siteyi ziyaret edin.

Dragon Interactive'in jQuery Navigasyonu

Bu elemanlar aşağı yukarı web tasarımının tanrılarıdır ve siteleri de bunu doğrular nitelikte. Bunun için sadece ana sayfalarının başlık kısmındaki jQuery navigasyonuna bakmak yeterli. Daha önce hiç bu kadar seksi bir navigasyon gördünüz mü?

Siteyi ziyaret edin.

FamSpams Facebox

FamFamFam, sitenin FamSpam özelliği için özel bir lightbox betiğine ihtiyaç duydu. Site bunun üzerine FaceBox adı verilen bir yöntem oluşturmaya karar verdi. FaceBox, lightbox'un efektlerini kopyalıyor ancak statik html sayfalarını, iletişim formlarını; kısacası istediğiniz her şeyi gösterebilmenizi sağlıyor. Facebox günümüzde yoğun talebin ardından bir jQuery eklentisi olarak dağıtılıyor.

Siteyi ziyaret edin.

Grooveshark Widget Creator

Sıradan bir flash menüsü / kontrol menüsü kullanmak yerine, Grooveshark biraz karıştırarak özel bir jQuery betiği oluşturmakta bulmuş çözümü. Sitenin sunduğu betik, kendi müzik widgetlerinizi oluşturabilmenizi sağlıyor ve pek güzel görünüyor.

Siteyi ziyaret edin.

CSS-Tricks Fade-In Navigasyonu

Chris Coyier tarafından hazırlanan CSS-Tricks, inanılmaz derecede basit ancak kullanışlı bir jQuery menüsüne sahip. Bağlantıların üzerine fare imleci götürüldüğünde doğrudan renkleri değiştirmektense, jQuery kullanılarak renk geçişi sağlanmış durumda.

Siteyi ziyaret edin

David Walsh Link Nudge

DavidWalsh.name'den geliştirici David Walsh, bağlantılarınızın üzerine fare imlecini götürdüğünüzde küçük bir iteleme efekti ile sonuçlanan küçük ve kullanılması çok kolay olan bir betiği bünyesinde barındırıyor. Bu betik jQuery'nin hover yeteneklerinden sonuna kadar faydalanıyor. Yan çubuktaki ve altlıktaki bağlantılar üzerinde efekti görebilirsiniz.

Siteyi ziyaret edin

CarrotCreative - Sitelere Yönelik Özel Lightboxlar

CarrotCreative websitesini ziyaret ederseniz, iki özel jQuery efekti ile karşılaşacaksınızdır. İlk olarak eğer sol üst kısımdaki sitelere tıklarsanız, sitelerin ve simgelerinin listelendiği 'lightbox' benzeri bir efektin kendine özgü uygulamasını göreceksinizdir. İkincisi ise eğer herhangi bir navigasyon bağlantısına tıklarsanız, sayfanın yeniden yüklenmediğini, bunun yerine yeni sayfaların sağ taraftan geldiğini göreceksinizdir.

Siteyi ziyaret edin

BrightCreative Portfolyosu

Bir diğer "ikisi bir arada" kullanım örneği daha... Bright Creative, site navigasyonu üzerinde gerçekten rahatlatıcı ve sımsıcak bir jQuery efektine sahip. Bunun yanısıra sitenin tüm diğer portfolyo sayfalarının sekme efekti de bulunuyor, bu sebeple kullanıcının her bir yeni sayfa için sayfanın tamamını yüklemesi gerekmiyor - jQuery ve AJAX'ın da yardımıyla.

Siteyi ziyaret edin

İnanılmaz Giriş Formu

Çok uzun zaman önce, Connor Zwick nasıl büyüleyici bir açılır menü yapılabileceğine dair güzel bir rehber yazmıştı.

Siteyi ziyaret edin

Aviary'nin Uygulama Kaydırıcısı

Bu kullanımı bir tür "marquee" olarak adlandırmak hata olur. Bunun yerine Aviary, çok güzel görünen ve işleyen bir 'kaydırıcı' kullanarak, çok miktarda metni küçük bir alanda görüntüleyebilmeyi başarabilmişler. Daha da iyisi JavaScript'in etkin olmadığı ortamlarda bile kaydırıcının bir nebzeye kadar işleyebiliyor oluşu.

Siteyi ziyaret edin

DesignFlavr'ın Geçiş Efekti

İlham alınacak tasarımlara yönelik kaynakları ile tanınan DesignFlavr, sade bir fadeIn/fadeOut efektini sitenin seçkin çalışmalarını ve onlara bağlı açıklamalarını görüntülemek için kullanmışlar. Ayrıca site yetkilileri sitenin ana navigasyonu üzerinde lavalamp eklentisini de çok güzel bir şekilde kullanmışlar.

Siteyi ziyaret edin

HV-Design'ın RSS Simgesi İçin Kullandığı Belirme Efekti

HV-Design'ın ana sayfasında RSS simgesinin ilk olarak bir taslak olarak belirdiğini, ardından da fare ile üzerine gelindiğinde tamamlanmış bir RSS simgesine büründüğünü göreceksiniz.

Siteyi ziyaret edin

Asylum'un Özel Kaydırıcısı

Mükemmel bir web sitesi olmasının yanısıra, Asylum'ın "seçkin makaleler" bölümü için kullandığı kaydırıcı da kendisini benzerlerinden bir adım öne çıkarıyor. Bu kaydırıcının diğerlerinden neden daha güzel olduğunu anlamak zor, bunun sebebi muhtemelen ilgili kaydırıcının diğerlerinden kısmen daha farklı davranıyor olması. Siteye girin ve kendiniz test edin.

Siteyi ziyaret edin

jQuery Kullanılarak Kolaylaştırılan 5 JavaScript Tekniği

Brian Reindel, hazırladığı web sitesi üzerinde istediğiniz şekilde kullanabileceğiniz 5 özel betiği sergiliyor. Makale, daha önce kullanılan javascript tekniklerini alıyor ve onları daha güçlü, daha sade okunması daha kolay kılmak için jQuery ile harmanlıyor.

Coda'nın Tüm Web Sitesi

Coda, büyüleyici kullanıcı arabirimi ve site tasarımı ile kendisini benzerlerinden bir adım öne çıkarıyor. Sitelerinde kullandıkları sekmeli içeriğin kullanım şekli, sitenin yayımlanmasının hemen ardından jQuery geliştiricileri arasında yaygaraya neden oldu ve herkes, sitelerine bu yöntemi entegre etmeye çalıştı. Ayrıca site üzerinde de başlık kısmında bulunan bağlantılar için çok güzel bir hover efekti kullanılmış.

Siteyi ziyaret edin

Clark Lab Geçiş Efekti

ClarkLab, ThemeForest sitesinde yazarlık yapan tanınmış ve başarılı bir yazardır. Eğer aşağıdaki bağlantıya tıklayarak onun portföyünü ziyaret ederseniz, büyük boyutlu başlık imajının bir süre sonra kendisinin son çalışmalarını gösteren içeriğe doğru yavaşça geçiş yaptığını göreceksinizdir. Geçiş efekti o kadar başarılı bir şekilde uygulanmış ki üstteki imajın değiştiğini zar zor fark edebiliyorsunuz.

Siteyi ziyaret edin

Rob Young Kullanıcı Arabirimi

Tasarımcı ve Sanat Yönetmeni Rob Young, bugüne kadarki çalışmalarını bir Mac ekranı üzerinde görüntüleyen bir kullanıcı arabirimini sitesinde kullanmış. Ardından jQuery kaydırma efektlerini kullanarak, her bir yeni sayfanın sanki bilgisayar ekranı üzerinde görüntüleniyormuşçasına kayarak ekran üzerinde belirmesini sağlamış.

Siteyi Ziyaret Edin

Web Designer Wall

Görsel olarak büyüleyici bir site olmasının yanısıra WDW bazı elementlerin üzerine fare imleci götürüldüğünde beliren özel olarak gelitirilmiş bir jQuery betiğini kullanıyor. Efektleri görebilmek için siteyi ziyaret ettikten sonra fare imlecinizi RSS ve navigasyon öğeleri üzerine götürün.

Siteyi ziyaret edin

Junaid W. Hanif

Bir diğer güzel sekme efekti daha... Okların yerine sayfalama ve AJAX kullanılarak sade ve kullanışlı bir kullanıcı arabirimi oluşturulmuş. Ayrıca navigasyon öğeleri de sade ve güzel bir efekte sahip.

Siteyi ziyaret edin

KomodoMedia

En sevdiğimi en sona sakladım. İlk olarak tasarıma şöyle bir bakın. Ne kadar güzel, özgün ve rahatlatıcı değil mi? Site üzerinde bugüne kadar gördüğüm en yaratıcı jQuery efektlerinden birisi kullanılmış. 'foilage-o-meter' adı verilen bir kaydırma çubuğu kullanıldığında site tasarımının genelinin yavaşça değiştiğine şahit olacaksınız. Site genelindeki sürprizler için de sitenin kaynak koduna bakmayı unutmayın!

Siteyi ziyaret edin

jQuery'nin sizin yaratıcılığınız ve yetenekleriniz doğrultusunda yapabilecekleri sınırlandırılan bir araç olduğu daima aklınızda bulunsun. Tasarımınız ve geliştirme süreciniz daima kendinize özgü olsun, bunun sonucunda çok güzel sonuçlarla karşılaşacağınızdan emin olabilirsiniz. Lütfen yorumlarınızla sizin de tasarımını ve işlevselliğini beğendiğiniz siteleri bizlerle paylaşmayı unutmayın.

Kaynak: NetTuts

jQuery ile ilgili yazdığım diğer yazılar

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

jQuery İle Kolayca İpucu (Tooltip) ve İmaj Önizleme Oluşturma Yöntemleri

qrHsn — Thu, 08 Jan 2009 07:45:00 GMT

jQuery'i ve onun geliştiricilerin hayatını kolaylaştırma yöntemlerini seviyorum. Her ne kadar jQuery'i kabullenmek benim biraz zamanımı alsa ve halen kendi ihtiyacım olan kodları kendim yazmayı tercih etsem de, jQuery'nin avantajlarını inkar edemem. Son zamanlarda fare imlecini bir bağlantı üzerine getirdiğimde imaj önizlemesini görüntülemem gereken bir proje aldım. Biliyorsunuz, hani şu link üzerine farenizi götürdüğünüzde çıkan kutucuklar içerisinde imaj görüntülenmesi. Halihazırda o proje üzerinde jQuery kullanılıyor olmasından ötürü bunu bir fırsat olarak gördüm ve bu gelişmiş kütüphane ile neler yapılabileceğini araştırmaya koyuldum. Bir süre sonra da çok basit bir betik hazırlarken buldum kendimi. Bugün, size bu çok ama çok basit betiği kullanarak oluşturulmuş 3 örneği göstereceğim.

3 ipucunu bir arada indirin

Özellikler ve Prensipler
Bu betiğin yaptığı şey bir öğe üzerine fare imlecinizi götürdüğünüzde gövdeye bir element yerleştirmek. Bu elementin nasıl görüntüleneceği CSS ile tanımlanıyor (mutlak (absolute) konumlandı ve üzerine stil uygulandı) ve bu sayede bizim tek yapmamız gereken o elementi bir içerik ile doldurmak, fare pozisyonunu hesaplamak ve ona uygun olarak elementi hareket ettirmek. Fare imleci nesne üzerine götürüldüğünde, içeriğindeki element de onunla birlikte hareket ediyor ve fare imleci elementin üzerinden kaldırıldığında, içeriğindeki element siliniyor.

Bu betiği uygulama üzerinde görebileceğiniz birkaç örnek:

Örnek 1: Bugüne kadarki en basit jQuery Tooltip (İpucu)

Bu betik A etiketinin başlığını (title etiketinin değerini) alıyor ve açılır elementin içerisine yerleştiriyor.

<a href="http://www.hafif.org" class="tooltip" title="meraklı ol!">ipucu için farenizi buraya sürükleyin</a>

Betiği uygulama üzerinde görün

Örnek 2: Resim Önizleme Galerisi

Burada bir dizi önizleme resmimiz bulunuyor. Her önizleme resminin üzerine fare imleci getirildiğinde betiğimiz, önizleme resminin bağlantıladığı resmi görüntüleyecek. Bu yöntem içeriği erişilebilir kılıyor aynı zamanda, zira JavaScript'in aktif olmadığı tarayıcılar ve sistemler üzerinde de bağlantıya tıkladığınızda resmin kendisine ulaşabilyorsunuz.

<a href="1.jpg" class="preview"><img src='http://www.bildirgec.org/1s.jpg' alt="gallery thumbnail" /></a>

Betiği uygulama üzerinde görün

Örnek 3: URL Önizlemesi İçeren Bağlantılar

Bu yöntem biraz daha uğraş gerektiriyor ancak sitenize fazladan bir özellik eklemek istiyorsanız buna değer. Burada ihtiyacınız olan şey hedef URL'nin bir ekran görüntüsü. İlgili sitenin ekran görüntüsünü A etiketinin REL değerine girdikten sonra betiğimiz işin geri kalanını halledecek.

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

Yine eğer önizleme resmine bir açıklama eklemek istiyorsanız o zaman TITLE değerini doldurabilirsiniz:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

Betiği uygulama üzerinde görün

3 ipucunu bir arada indirin

Kaynak: CSS Globe

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

10 Kullanışlı Web Uygulaması Arayüzü Tekniği

qrHsn — Mon, 19 Jan 2009 17:02:00 GMT

Gün geçtikçe daha çok web uygulaması Web'e geçiş yapıyor. Platform sorunları ve kurulum gereksinimleri olmadan, bir hizmet olarak yazılım (software as a service) modeli oldukça çekici görünüyor. Web uygulama arabirimi tasarımı, özünde, web tasarımı iken, aslında daha çok üzerine tasarlandığı uygulamanın özelliklerine odaklanır. Masaüstü yazılımları ile yarışabilmek için web uygulamaları basit, yenilikçi ve karşılık veren kullanıcı arabirimleri sunabilmeli ve bunlar da, onları kullanan kullanıcıların ulaşmak istediklerine en kısa yoldan ve onları yormadan ulaşabilmelerine aracılık edebilmelidirler.

Geçmişte web uygulamalarını olması gerektiği kadar dikkate almıyorduk ancak şimdi, web uygulamalarını daha güzel ve daha kullanıcı dostu kılacak bazı tasarım çözümleri ve kullanışlı tekniklere bakmanın zamanı geldi. Bu makale, modern web uygulamalarında kullanışlı tasarım çözümleri ve tasarım öğelerine yönelik yaptığımız derinlemesine araştırmanın ilk bölümünü oluşturmaktadır. Yazının devamında, pek çok başarılı web uygulamasında kullanılan 10 kullanışlı arabirim tasarlama tekniklerini ve en iyi deneyim örneklerini bulacaksınız.

Lütfen yazıyı okuduktan sonra siz de kendinize özgü fikirlerinizi, yaklaşımlarınızı ve kodlama çözümlerinizi bizlerle paylaşmaktan çekinmeyin. Yazının ikinci bölümü de pek yakında yayınlanacaktır.

1. İsteğe Bağlı Arayüz Elementleri
Sadelik, kullanıcı arabirim tasarımında önemlidir. Ekranda ne kadar fazla kontrol elementi gösterirseniz, kullanıcılarınız onları anlamak için o kadar fazla zaman geçireceklerdir. Daha fazla seçenek olduğunda, kullanıcıların kullanabileceği seçenekler onlara daha belirgin gelecek ve onları taramaları daha kolay olacaktır. Bir arayüzü sadeleştirmek burada yazıldığı kadar kolay bir iş değildir, özellikle uygulamanızın özelliklerinden kısmak istemiyorsanız.

Kontain'in arama kutusuna tıkladığınızda benzer bir açılır menü belirmektedir. Eğer arama kriterlerinizi daraltmak istiyorsanız, açılan bu menüyü kullanarak ilgilendiğiniz içerik kategorilerini seçebilirsiniz. Bu seçenekleri arama kutusu ile bütünleştirmek, arama kutusunu basitleştirmektedir.

İşleri sadeleştirmenin bir yolu, gelişmiş özellikleri gizlemek ya da perdelemektir. Arayüzünüzde en çok kullanılan elementlerin hangileri olduğunu bulun ve geri kalanını ayıklayın gitsin. Bunu açılır menüler ve kontroller ile yapmanız mümkündür ki bu her iki yöntem de masaüstü uygulamalarında oldukça popülerdir. Örneğin, eğer arama kutunuz gelişmiş filtrelere sahipse, o zaman onları satırın sonunda özel bir açılır menünün ardına gizleyin. Eğer kullanıcıların bu filtrelere ihtiyacı varsa sadece birkaç fare tıklaması ile onları etkinleştirebilirler. Bunu söylemesine söylüyorum ama neyi gizleyip neyi gizlemeyeceğinize karar vermek kolay bir iş değildir ve her bir kontrolün ne kadar önemli olduğu ve ne kadar sık kullanıldığı ile doğrudan ilgilidir.

CollabFinder'ın arama bağlantısına tıkladığınızda başka bir sayfaya yönlendirilmezsiniz. Aksine, arama kutusu bir açılır menüyü kontrol ederek, sizin doğrudan bulunduğunuz sayfa üzerinden arama yapmanızı kolaylaştırır.

2. Özelleştirilmiş Kontroller
Durum için doğru arayüz kontrollerini seçmek önemlidir. Farklı durumlar farklı şekillerle kontrol edilebilir ve bazı kontroller kendileri için tasarlanan görevlerde diğerlerinden daha iyidirler.

Backpack hatırlatıcı tarihi için kullanılan kompakt bir takvim tarih ve zaman seçicisine sahiptir.

Örneğin gün, ay ve yıl için ayrı ayrı açılır menüler kullanarak kullanıcıların seçmelerini sağlayabilirsiniz. Ancak açılır menüler çok verimli değildirler, özellikle seçmek istediğiniz tarihin üzerine doğrudan tıklayabilmenize olanak sağlayan takvim seçicileri ile kıyaslandığı zaman. Takvim seçicileri ayrıca sizin günleri, haftaları ve ayları (özellikle iş günlerini ve haftasonlarını) görebilmenize yardımcı olurlarken, sıradan açılır listelere kıyasla daha bilgilendirilmiş kararlar verebilmenizi sağlarlar.

MyBankTracker'ın yıllık gelir oranlarını hesaplamak için kullanılan bir hesaplayıcısı bulunmaktadır ve bu hesaplayıcı, kolay kullanımlı kayan kontrolleri kullanarak, farklı projeksiyonları kolayca deneyebilmenizi sağlamaktadır.

Bir diğer güzel örnek ise kaydırma çubuklarıdır. Evet, numaraları her zaman el ile girmek mümkündür, ancak bazı özel durumlarda kaydırma çubukları ve buna bağlı kontrolörler çok daha iyi iş çıkarırlar. Bunlar sadece daha kolay kullanımlı olmakla kalmaz (sadece sürükle ve bırak), ayrıca seçiminizin izin verilen en düşük ve en büyük değerler arasında nereye denk düştüğünü görsel olarak algılamanıza da yardımcı olur.

3. Basılı düğmeleri iptal etmek
Web uygulamalarının zorlandığı bir diğer problem de form gönderim işlemidir. Basit formlarla "Gönder" düğmesine iki ya da daha fazla kez çabucak basarsanız, form iki ya da üç kez gönderilebilir. Bu hiç şüphesiz bir problemdir, zira aynı form girdisinin benzer kopyalarını oluşturacaktır. Bu kopya girdilerin önüne geçmek zor bir işlem değildir, ancak pek çok web uygulamaları için kaçınılmaz bir işlemdir.

Bu korumaya iki bağ bulunur: sunucu tarafı ve istemci tarafı. İşin sunucu tarafına burada değinmeyeceğiz zira bu kullandığınız programlama diline ve sizin altyapı mimarinize göre değişiklik gösterecektir. Her koşulda yapmanız gereken şey, verinin işlenişi sırasında gönderilen her ne ise onun halihazırda depolanan verinin bir kopyası olup olmadığını kontrol edecek bir mekanizmayı entegre etmek olmalıdır.

Yammer "Güncelle" düğmesini yeni bir mesaj gönderildiğinde otomatik olarak etkisizleştirir.

İşin istemci tarafı çok daha basittir. Tek yapmanız gereken "Gönder" düğmesine tıklandığında onu etkisizleştirmektir. Bunu yapmanın en kolay yolu, "Gönder" düğmesine aşağıdaki gibi basit bir JavaScript kodu dahil etmektir.

<input type="submit" value="Submit" onclick="this.disabled=true" />

Elbette yukarıda da belirttiğimiz gibi istemci tarafının yanısıra sunucu taraflı bir kontrol mekanızmasını da uygulamanıza entegre etmeniz önerilir.

Çevirmen'in Notu: Kodaman'da PHP'de güvenli form gönderimlerine yönelik bir dizi makale bulunmaktadır.

4. Modal Pencereler Çevresindeki Gölgeler
Açılır menüler ve pencerelerin çevresindeki gölge efektleri sadece göze hoş gelmekle kalmaz, ayrıca efektin uygulandığı menünün ya da pencerenin, sayfanın diğer elementlerinden daha ön planda belirmesine de görsel olarak yardımcı olur. Bunun yanısıra efektin uygulandığı elementin ardındaki içeriğin oluşturması muhtemel görüntü kirliliğinin de, üzerine uygulanan karartıcı efektin de yardımı ile önüne geçer.

Bu tekniğin kökeni, sıradan masaüstü uygulamalarına dayanmaktadır. Bu tekniğin kullanıldığı masaüstü uygulamalarında kullanıcının dikkati, en öndeki pencereye ya da diyaloğa çekilir. Pek çok modal pencereler masaüstü uygulamalarında olduğu kadar kolayca ayırt edilebilir olmadıklarından beri, gölge efektleri, onların, okuyucular tarafından daha kolay algılanabilir kılınmasına yardımcı olur, zira ilgili pencere, üç boyutlu gibi görünür ve sayfanın geri kalanının önüne geçer.

Digg'in giriş penceresinin çevresinde bulunan kalın gölge efekti sayesinde, ilgili pencerenin ardındaki içeriğin oluşturduğu görüntü kirliliğinin önüne geçilmiş olur.

Bu efekte ulaşabilmek için tasarımcılar, saydam bir PNG imajı oluştururlar ve asıl içeriği de bu PNG dosyasını arkaplan imajı olarak kullandıkları kapsayıcının içerisine yerleştirirler. Kapsayıcının köşelerinde eşit oranlarda boşluk uygulanmas, içeriğin daha kolay seçilebilmesinin de önünü açar. Bir diğer seçenek ise saydam köşeler ile birlikte arkaplan imajı kullanarak, içeriği mutlak pozisyonlama ile yerleştirmektedir. Digg bu yöntemi kullanmaktadır - kullandıkları imaj ise bu (dialog.png). Kullandıkları kodlar ise aşağıda:

(X)HTML:
<div id="container"> <div style="display: block; top: 236px; opacity: 1;" class="dialog"> <div class="body"> <div class="content"> ... </div> </div> </div> </div>

CSS:
.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001; } .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

Bu yöntemlerin yanısıra JavaScript tabanlı lightbox çözümleri ile ya da CSS3 elementlerini kullanarak gölge efektlerini kullanabilirsiniz. Ancak CSS3'ün Internet Explorer tarafından desteklenmediğini unutmayın.

Basecamp'in proje değiştirici penceresinin ardında geniş bir gölge efekti bulunuyor ve bu efekt, pencerenin, sayfanın diğer elementlerinden daha belirgin olmasını sağlıyor.

5. Size ne yapmanız gerektiğinizi söyleyen boş alanlar
Bir web uygulamasını tasarlarken, onu basit bir veri ile test etmek kadar, onun güzel görünmesi ve ortada henüz hiçbir veri yokken kullanıcısına yardımcı olmak da önemlidir. Boş alanları tasarlamanız gerekmektedir.

Ortada henüz sayfa ya da komut için bir bilgi bulunmazken, kullanıcıya ne yapması ya da nasıl başlaması gerektiğini söyleyen bir mesaj o boş alana gidebilir. Örneğin bir proje yönetim uygulamasının ana sayfası, kullanıcının projelerini listeleyebilir, ancak eğer henüz orada bir proje bulunmuyorsa, o zaman proje oluşturulabilecek sayfanın bağlantısını oraya yerleştirmek yerindedir. Eğer orada bir düğme bulunuyor olsa bile, biraz daha fazla yardımın kimseye zararı dokunmaz.

Campaign Monitor bir elektronik posta kampanyası hazırlamaya başlarken sizi doğru yöne yönlendirir.

Bu teknik, kullanıcıların sunulan servisi, kayıt olduktan hemen sonra denemeleri için teşvik eder. Kullanıcıya uygulamanız her adımında rehberlik ederek, onun uygulamanızın sunduğu avantajları anlamasına ve kendileri için kullanışlı olup olmadığını kavramasına yardımcı olur. Bu ayrıca kullanıcıya "sadece" en önemli veriyi sunar, zira onları gereksiz seçeneklerle daha ilk andan boğmanın bir anlamı yoktur. Unutmayın ki kullanıcılar genellikle kendilerine sunulan fikrin aşağı yukarı tümünü anlamak isterler ancak detaylarla ilgilenmek istemezler - zira buna ne zamanları ne de ilgileri olmayabilir.

Boş alanları kullanarak kullanıcıları motive ederek ve uygulama adımlarını canlılaştırarak sıkılıp kaçan kullanıcıların önüne geçebilir ve potansiyel müşterilerin sisteminizin nasıl daha iyi çalıştığını anlamalarına yardımcı olabilirsiniz.

Wufoo'nun formlar sayfasının geniş ve kullanıcı dostu bir mesajı bulunur ve bu mesaji herhangi bir form bulunmaması durumunda sizi yeni bir form oluşturmaya davet eder.

6. Basılı düğme durumları
Pek çok web uygulamasının özel tasarlanmış düğmeleri bulunur. Bunlar ya linkler ya da girdi düğmeleri olup kendilerine atanmış arkaplanlar bulunur. Öntanımlı girdi düğmeleri bazı durumlar için elverişli olmayabilir ve metin bağlantıları bazen çok sade kaçabilir. Burada karşılaşılabilecek olan zorluk, bağlantılarınızı birer düğme gibi gösterdiğinizde onların birer düğme gibi davranmalarını sağlamaktır - ki bu kullanıcıların onların üzerine tıkladıkları zaman ilgili düğmenin "basılı" görünüme bürünmesini de içerir.

Bu aslında sadece görsel bir hile değildir. Kullanıcılara anında geribildirim vererek, uygulamanın daha duyarlı olmasının ve kullanıcının masaüstü uygulamalarında yaşadıkları deneyime en yakın deneyimi web uygulamaları üzerinde yaşamalarını da sağlar.

Basılı düğme durum efektlerini CSS'nin active alt sınıfını kullanarak oluşturmanız mümkündür. Örneğin eğer bağlantınız add_task_button sınıfına sahipse, onun basılı durumunu add_task_button:active ile stillendirebilirsiniz.

Highrise sitesindeki düğmelerin üzerine tıklandığında düğmelere sanki gerçekten basılıyormuş hissi uyandırılır ve kullanıcı ilgili uygulamanın daha duyarlı olduğu hissine kapılır.

7. Kayıt Sayfasına Giriş Sayfasından Bağlantı Vermek
Uygulamanız için kayıt olmamış bazı insanlar sürekli olarak sitenize halihazırda üye olmuş kullanıcıların giriş yapabilecekleri sayfa ile karşılaşırlar ancak acele ettiklerinden de olsa gerek kayıt sayfasını bulamazlar. Belki de sadece kayıtlı kullanıcıların kullanımına açık olan bir özelliğe erişmeye çalışmış olabilirler.

Delicious hesabınız yok mu? Sorun değil, zira kayıt olabileceğiniz bağlantı giriş sayfası üzerinden verilmiş bile.

Goplan sitesinin üye girişi sayfasında bulunan güzel renklendirilmiş düğmesi sizi kayıt sayfasına yönlendiriyor.

Giriş sayfanıza kayıt olunabilecek bir bağlantı yerleştirerek bu işlemi onlar için kolaylaştırın. Eğer henüz bir hesabınız yoksa, kullanıcılar kayıt sayfasını bulmak için arama yapmamalıdırlar. Smashing Magazine'nin araştırmaları gösteriyor ki sitelerin %18'i, üye girişi sayfası üzerinde bir kayıt formu ya da o forma giden bir bağlantıyı barındırmaktadır (örneğin YouTube, Reddit, Digg, Metacafe).

8. İçerik/Durum hassaslığında navigasyon
Kullanıcıların karşı karşıya kaldığı her durumda onların neler görmeyi bekleyecekleri ve nelere ihtiyacı olabileceklerini düşünmek önemlidir. Aynı navigasyon kontrollerini her sayfada göstermenize gerek yoktur, çünkü kullanıcılarınızın her durumda onların tamamına ihtiyacı yoktur.

İçweik hassaslığında kontrollere yönelik en güzel örneklerden birisi de Microsoft Office 2007'nin arayüzünde son dönemde yapılan bir değişikliktir. Şerit üzerinde bulunan her bir sekme, ilgili aktiviteye yönelik eylem düğmelerini listelemektedir, örneğin grafik düzenleme, gözden geçirme ya da basitçe yazı yazma gibi. Web uygulamaları da bunun gibi benzer içerik hassaslığında kontrollerin nimetlerinden faydalanabilirler zira bu tekniğin kullanıldığı kontroller, arayüz üzerinde sadece kullanıcının ihtiyacı olan şeyleri göstererek, her şeyi tekrar tekrar göstermeyerek kalabalıklığı gidermeye yardımcı olacaktır.

Lighthouse artık alışık olduğumuz sekmeli navigasyon menüsünü kullanmaktadır, ancak, sekmeler içerisinde ikinci seviye menüler de yer almaktadır. Bu seviye görünümleri, sadece aktif sekmenin içeriği ile alakalı aktivitelere yönelik bağlantıları listelemektedir.

9. Ana Özellikleri Vurgulamak
Tüm kontroller aynı öneme sahip değillerdir. Örneğin, yeni bir öğe oluşturduğunuz bir öğe üzerinde sadece "Oluştur" ve "İptal" düğmeleri olabilir. "Oluştur" düğmesi daha önemlidir, zira kullanıcının ilgili sayfada genellikle yapacağı şey budur. Sadece bazı ender zamanlarda sayfayı iptal etmek isteyeceklerdir. O zaman eğer bu kontroller yan yana dizilirlerse, onlara aynı vurguyu yapmak istemeyebilirsiniz.

Lighthouse üzerindeki "Konu Oluştur" düğmesi. Onun hemen yanında "iptal" düğmesini görüyorsunuzdur, sadece salt metin olarak. Düğme yalnızca daha fazla önem kazanmakla kalmaz, ayrıca daha geniş tıklama alanına da sahip olup fark edilmesi daha kolaydır, sırf boyutundan ötürü.

"Oluştur" düğmesi üzerindeki vurguyu arttımak için basitçe farklı stillemeler ve farklı kontrol yöntemleri kullanabiliriz. Bazı uygulamalar form girdi düğmelerini bir eylem oluşturmak için kullanırlar ve iptal düğmesini bir bağlantı olarak yansıtırlar. Bu "oluştur" düğmesi için daha fazla tıklama alanı oluşturmakla kalmaz, ayrıca kullanıcının o sayfada olma nedeni bu olduğu için onların ilgili düğmeyi kolayca fark etmelerini sağlar.

10. Video Kullanmak
Resimler ve metinler kullanıcılarınızla iletişim kurmak ve uygulamanızın özelliklerinden bahsedebilmek için mükemmel bir yöntem olmasına rağmen eğer kaynaklarınız varsa video kullanmak daha da iyi bir alternatif olabilir. Özellikle son yıllarda web üzerinde videonun popülaritesi giderek artmaktadır. Web uygulamaları için videolar, genellikle, bir ürünün özelliklerini göstermek için birer araç olarak kullanılırlar, ancak bu video kullanabileceğiniz tek yöntem değildir.

GoodBarry sitesi ön sayfasında ürünü tanıtmak için bir video kullanır. Site ayrıca uygulama üzerinde kullanıcılara uygulamayı kullanmaya nasıl başlayabileceklerine yönelik yönergeler içeren videolar da içerir.

MailChimp acemi kullanıcılara yardımcı olmak için doğrudan yönetici paneli üzerinde yardımcı videolar içerir.

Bazı web uygulamaları doğrudan uygulamanın içerisinde, kullanıcıya uygulamanın nasıl kullanılabileceğini anlatan videolar kullanırlar. Videolar, uygulamanızın nasıl kullanılabileceğini gösterebilmek için muhteşem birer araçtır, çünkü algılaması bir sayfa metne oranla daha kolaydır ve ayrıca çok daha nettir, zira izleyici ne yapıldığını doğrudan görmektedir.

Daha önce kullanılırlık ile ilgili yazdığım diğer yazılar

Kaynak: Smashing Magazine

Bu yazı qrHsn tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage